IE, hiding Option Elements with CSS, and Dealing with innerHTML.

This is mostly in response to another blog with a post of the same title: IE, hiding Option Elements with CSS, and Dealing with innerHTML.

Quick synopsis:

In Firefox, you can “display:none;” on an <option> element in a <select> and PRESTO, it gets filtered out.

IE simply ignores the CSS on <option> elements.

With all the injection and jquery DOM manipulation on the go, the best solution I’ve used so far that works with IE 6 and 7 is AJAH.

I use a <span id=”something”></span> and simple use

$(‘#something’).load(‘path/to/script.asp?id=3’);

each time I want a new set of options. I personally believe there is too much overhead in the other options.