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

Answer 1

The solution by @Gev is good, but the options still appear (even though disabled), so the behaviour is inconsistent across browsers.

You could amend the option tag to something else which stops it appearing, but then you lose any attributes or HTML5 data tags.

The solution I came up with was to wrap any options you want disabled in a different tag (in this case a made up one, which does the job and makes it clear what's happening).

Starting with example of options also with optional data tags:

  34
  37
  71

To hide the options you don't want:

$("#myselections > option").each(function () {
    if(some check) {
        $(this).wrap("");
    }
});

To undo the above on the whole list before hiding different options:

$("#myselections > optionhidden").each(function () {
    $(this).replaceWith($(this).html());
});