Francis Hemsher Francis Hemsher - 1 month ago 6
Javascript Question

Disable selected option in chrome

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



<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>
</select>





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

Answer

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 = e.target.value
  var el = document.querySelector('select option[value=\''+val+'\']')
  el.innerHTML = '✓'+val
  el.setAttribute('disabled','disabled')
}
<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>
</select>

Comments