Display:none not working in IE 9

Question

I have a <select> object where I want to toggle some <option>s, and I do so by using the jQuery .hide() function. It works in Chrome/Firefox/etc but not in IE 9.

Fiddle link: http://jsfiddle.net/Cz4cm/11/

HTML:

<select>
    <option>Select a Term...</option>
    <option class="0" value="0" style="display:none;">Option0</option>
    <option class="1" value="1">Option1</option>
    <option class="2" value="2">Option2</option>
    <option class="3" value="3">Option3</option>
    <option class="4" value="4">Option4</option>
    <option class="5" value="5">Option5</option>
    <option class="6" value="6">Option6</option>
    <option class="7" value="7">Option7</option>
</select>

I want to toggle these values at various points so completely removing the HTML from the DOM is not an option. I only wanna toggle their visibility.

Anyone know a workaround/whatever I need to do to get .hide() to work in IE 9?

Thanks.

Answer 1

Unfortunately, the HTML specification does not define styling on option elements.

Some browsers allow it, some don't. But it's not standard compliant to do so.

http://msdn.microsoft.com/en-us/library/ms535877%28v=vs.85%29.aspx

Except for background-color and color, style settings applied through the style object for the option element are ignored. In addition, style settings applied directly to individual options override those applied to the containing select element as a whole.