CODEWITHSUNDEEP
javascriptgoogle-chrome
Francis Hemsher
Francis Hemsher

Reputation: 3498

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.

Upvotes: 0

Views: 661

Answers (1)

Pranesh Ravi
Pranesh Ravi

Reputation: 19133

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>

Upvotes: 1

Related Questions