javascript - style.display='none' doesn't work on option tags in chrome, but it does in firefox

Question

ok, heres some sample code that demonstrates the problem. if i click the button in firefox, the first option disappears. if i click the button in chrome, nothing happens, or rather if i inspect the first option, it does have the attribute "style='display:none'" but the option itself on the html page is not hidden.

<form>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type="button" onclick="document.getElementsByTagName('option')[0].style.display='none'" value="hide option 1">
</form>

why doesn't this work in chrome?

Answer 1

The workaround is to remove the option elements in response to your event and add them back if and when they are needed. IIRC, IE will not allow you to set the display to none on option elements. I would advise storing the removed elements in an array so that you can easily add them back in.