Francis Hemsher Francis Hemsher - 2 months ago 10
Javascript Question

Disable selected option in chrome

I have a select where I want to disable its selected option following its selection.

<select id="elementSelect" >
<option>SVG Element</option>
<option onClick=this.disabled=true;this.innerHTML='&check;circle' >circle</option>
<option onClick=this.disabled=true;this.innerHTML='&check;ellipse' >ellipse</option>
<option onClick=this.disabled=true;this.innerHTML='&check;rect' >rect</option>

This works OK is IE and FF, but Chrome ignores the onClick event.
Any ideas? Thanks.


onclick() event is not supported by <option>

Use querySelector to identify the option and add disabled attribute to it.

Hope this helps!

var select = document.getElementById('elementSelect')
select.onchange = function(e){
  var val =
  var el = document.querySelector('select option[value=\''+val+'\']')
  el.innerHTML = '✓'+val
<select id="elementSelect">
  <option value="SVG Element">SVG Element</option>
  <option value="circle">circle</option>
  <option value="ellipse">ellipse</option>
  <option value="rect">rect</option>