How to Hide and Show SELECT Options with JQuery in

Question

I'm trying to hide some options from a drop down. JQuery's .hide() and .show() work great in Firefox and Chrome, but no luck in IE.

Any good ideas?

Answer 1

Just to mention that IE11 navigator.appName returns 'Netscape' :) So taking it into consideration:

$("select option[value='your_option_value']").wrap((navigator.appName == 'Microsoft Internet Explorer' || navigator.appName == 'Netscape') ? '<span>' : null).hide();

Answer 2

Of many possible approaches, this method requires browser sniffing (which in general is not great) but doesn't require having multiple copies of the same select list to swap in and out.

//To hide elements
$("select option").each(function(index, val){
    if ($(this).is('option') && (!$(this).parent().is('span')))
        $(this).wrap((navigator.appName == 'Microsoft Internet Explorer') ? '<span>' : null).hide();
});

//To show elements
$("select option").each(function(index, val) {
    if(navigator.appName == 'Microsoft Internet Explorer') {
        if (this.nodeName.toUpperCase() === 'OPTION') {
            var span = $(this).parent();
            var opt = this;
            if($(this).parent().is('span')) {
                $(opt).show();
                $(span).replaceWith(opt);
            }
        }
    } else {
        $(this).show(); //all other browsers use standard .show()
    }
});

Credit for this lies squarely with Dima Svirid here: http://ajax911.com/hide-options-selecbox-jquery/