How to Hide and Show SELECT Options with JQuery in IE

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 g

Answer 1

Hide and Show the Options based on Browser detection

Of many possible approaches, this method requires browser sniffing, which can be unstable, but on the other hand with this approach we don't have to swap in and out multiple copies of the same select list.

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