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?
display = "none"; To show an element, set the style display property to “block”.
A block element fills the entire line, and nothing can be displayed on its left or right side. The display property also allows the author to show or hide an element. It is similar to the visibility property.
The JavaScript style display property is meant for setting and returning the display type of a specified element. Most HTML elements have the inline or block display types. The content that inline elements feature floats on their left and right sides.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With