Options with display:none not hidden in IE

Question

I have multiple options in a select. I have sorted the options and disabled and hidden the duplicate options with jquery. The code works well in chrome and firefox but in IE and safari, the options with display:none are still showing up.

Here is the jsfiddle of the code:

<select>
  <option value="5797">34</option>
  <option value="5809">37</option>
  ... 
  <option value="5653">71</option>
  <option disabled="" selected="selected" value="53">Eye</option>
  <option disabled="disabled" style="display: none;" value="5441">52</option>
  <option disabled="disabled" style="display: none;" value="5443">52</option>
  ...
  <option disabled="disabled" style="display: none;" value="5431">51</option>
</select>

http://jsfiddle.net/7vUdb/

Answer 1

IE doesn't support style="display:none;" on <option> tags.

Your only option is to remove them - either as part of the creation of the HTML, or via client-side script.

Answer 2

If somebody still faces this issue, here is my solution, it may be helpfull:

$('select.some-list option[id=someId]').attr('disabled', 'disabled').hide();

This hides the option in all browsers and disables if can't hide :). To bring back the option do not forget to enable it:

$('select.some-list option[id=someId]').removeAttr('disabled').show();

Answer 3

You can use detach() and remove() to do this.