Hide select option in IE using jQuery

Question

Currently I am using jQuery to hide/show select options using following code.

$("#custcol7 option[value=" + sizeValue + "]").hide();

This works fine in Firefox, but doesnt do any good in other browsers. How to I hide options from select in Chrome, Opera and IE?

Answer 1

You can also replace the html within the select.

Html:

<input id="Button1" type="button" value="hide option" />

<select id="foo">
<option >stuff</option>
<option >stuff2</option>
</select>

Jquery:

    $("#Button1").change(function () {
       $('#foo').html('<option >stuff</option>');
    });

Not exactly what you want, but perhaps it helps. For smaller dropdowns, it is definitely easier.

Answer 2

using the solution provided by AuthorProxy, it works fine for IE but when I attempt to do a .val() on the dropdown in firefox I get some funky values that don't make any sense. I have modified their option to include browser specific functionality, hide/show works for firefox.

$.fn.toggleOptionVisibility = function (stateVal) {
    var isBool = typeof stateVal === "boolean";
    return this.each(function () {
        var $this = $(this);
        if (navigator.userAgent.indexOf('MSIE') > -1 || navigator.userAgent.indexOf('Trident') > -1) {
            if (isBool) {
                if (stateVal) $this.filter("span > option").unwrap();
                else $this.filter(":not(span > option)").wrap("<span>").parent().hide();
            }
            else {
                $this.filter("span > option").toggleOptionVisibility(true);
                $this.filter(":not(span > option)").toggleOptionVisibility(false);
            }   
        }
        else {              
            if (isBool) {
                $this.show();
            }
            else {
                $this.hide();
            }
        }
    });
};

Answer 3

I just came across this and instead of cloning the entire select over and over I just replaced the options that need to be hidden with span elements and hiding the spans ( though the browser didnt visually show them anyway, I think ) - you may need to change your code ( if complex ) to iterate through the spans for complex logic.

The spans store a reference to the option and replace themselves with it when they need to be shown.

This code can obviously be refactored and prettified.

http://fiddle.jshell.net/FAkEK/12/show/

EDIT #2 ( USE THIS INSTEAD ): It occurred to me that instead of doing all this clone/reference/replace crap, just wrap the option with a span, hide the span, and on show just replace the span with the option again..

http://fiddle.jshell.net/FAkEK/25/show/

Answer 4

I think meder has provided valid answer and here it is slightly changed to reflect what works for me:

$.fn.optVisible = function( show ) {
    if( show ) {
        this.filter( "span > option" ).unwrap();
    } else {
        this.filter( ":not(span > option)" ).wrap( "<span>" ).parent().hide();
    }
    return this;
}

Tested with (long live BrowserStack):

• Windows XP: IE 6.0, Firefox 3.0, Safari 4.0, Opera 10.0, Chrome 14.0
• Windows 8: IE 10.0 Metro
• iOS 3.2 (iPad), iOS 6.0 (iPhone 5)
• Android 1.6 (Sony Xperia X10)

jsfiddle

Answer 5

meder's solution is what I went with for this, but with a small tweak to prevent it from wrapping an option in a span that was already in a span:

$.fn.hideOption = function() {
    this.each(function() {
        if (!$(this).parent().is('span')) {
            $(this).wrap('<span>').hide();
        }
    });
};
$.fn.showOption = function() {
    this.each(function() {
        var opt = $(this).find('option').show();
        $(this).replaceWith(opt);
    });
};

Answer 6

To Remove options use:

var opt=$("option").detach();

To show options use:

opt.appendTo( "select" );