<option> with display:none; does not work on IE

Question

I have some style='display:none' in the option element, it work well on Chrome and I realise it does not work on IE.

<select>
 <option style="display:none;">One</option>
 <option>Two</option>
 <option style="display:none;">Three</option>
 <option>Four</option>
</select>

Using jQuery, how to loop through the option to find display:none and remove the elements <option>?

Answer 1

this seems to work for me:

http://jsfiddle.net/PP4AP/1/

$('select option').each(function(){

    if(this.style.display == 'none')
    {
        $(this).remove();
    }

});

Answer 2

John Boker's solution is the right one for this question. But it does have the downside that you won't be able to ever retrieve those options once you've removed them.

One solution is to save the full HTML of the <select> before you remove any <option> tags.

var $s = $('select');
$s.data("originalHTML", $s.html());

Now you can easily restore by reversing this: $s.html($s.data("originalHTML"));

Full details are on this solution: https://stackoverflow.com/a/24439289/1766230

Also an example: http://jsfiddle.net/luken/9CYjy/