Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 924
user280109 Avatar asked Feb 24 '10 07:02

user280109


People also ask

How do you put display none in HTML?

display = "none"; To show an element, set the style display property to “block”.

What does style display block do?

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.

What does style display do in JavaScript?

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.


1 Answers

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.

like image 136
Russ Cam Avatar answered Oct 12 '22 11:10

Russ Cam