Tuesday, January 29, 2013

display:none and jQuery.hide() not working for <option> in IE

For some reason IE (at least IE9) will not allow you to hide an <option> tag. I initially discovered this when when a jQuery.hide() failed in IE but worked in another browser. I created a quick test that included an <option> with a style set to display:none (the equivalent of a jQuery.hide() ) and got the same issue.

I recalled IE had added a whole bunch of HTML attributes in the past and tried a few desperate alternatives like visible="false" or hidden="true" but nothing works at an <option> specific level.

A quick search on the net confirmed this was a known issue. The general recommendation is to remove and re-add the <option> as required.

Another option is to add the HTML attribute disabled to the <option> using jQuery.prop( "disabled", true). This greys out the option and makes it unselectable. This doesn't have the same visual affect but serves a similar purpose.

Never the less it would be nice if IE could add this to their fix list.

IE's <select> has also been a bit of a pain in the past, always rendering on top of content regardless of its position in the HTML or the z-index values.

No comments:

Post a Comment