JQuery Hide Option doesn't work in IE and Safari

Question

I'm trying to hide a few options in a dropdown box using .hide(). This works perfectly fine in firefox and chrome, but it doesn't work in IE and Safari. My original code is more complex but I've narrowed it down to this.

I've tried several combinations and nothing has worked.

.hide() works, but not for things within option tags for some reason.

Can someone please help me? This is driving me nuts. Thank you so much for taking the time help!

Here's my jscript:

    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".wrapper1").hide();
        });
    </script>

Here's the HTML:

                <label for="prodName">Product Name:</label> 
                <input type="text" name="prodName" /><br />

                <label for="candy">Candy:</label> 
                <select name="candy" id="candy">
                        <option value="0" class="blank" selected="selected"></option><!-- PHP and JS validators should not allow "0" here. User should be prompted to select something. -->
                        <option value="1" class="wrapper1">Hide this 1</option>
                        <option value="2" class="wrapper1">Hide this 2</option>
                        <option value="3" class="wrapper2">Show this 1</option>     
                </select><br />

Answer 1

This will work.. change .show to .showOption and .hideOption. However this still kind of sucks in IE because in firefox you can make it hide an option which is selected. So if "Select One" is shown and is hidden. Firefox will still say "select one".

$.fn.showOption = function() {
this.each(function() {
    if( this.tagName == "OPTION" ) {
        var opt = this;
        if( $(this).parent().get(0).tagName == "SPAN" ) {
            var span = $(this).parent().get(0);
            $(span).replaceWith(opt);
            $(span).remove();
        }
        opt.disabled = false;
        $(opt).show();
    }
});
return this;
}
$.fn.hideOption = function() {
this.each(function() {
    if( this.tagName == "OPTION" ) {
        var opt = this;
        if( $(this).parent().get(0).tagName == "SPAN" ) {
            var span = $(this).parent().get(0);
            $(span).hide();
        } else {
            $(opt).wrap("span").hide();
        }
        opt.disabled = true;
    }
});
return this;
}

Answer 2

You're right. Some browsers just won't let you hide option elements. You'll likely need to remove them.

Although perhaps a better (or at least an alternate) possibility would be to disable them.

$(".wrapper1").prop('disbled', true);

Answer 3

You have to remove the option elements.. hiding them with display:none is not supported in many browsers.

HIDE

var elems = $(".wrapper1").remove();

SHOW

$('#candy').append(elems);

Answer 4

I tried the solution that uses <span> around options, but found that it didn't work for me in all browsers.

I've made a jQuery Plugin that solves this very nicely. With it, you would do this:

$('#selection1').hideOption('1');
$('#selection1').showOption('1');

You can hide and show them as much as you want, and they will keep their original order and any .data('x') values you've assigned to the option. It works in all browsers. You can see that in this sample: jsFiddle - Toggle Dropdown Options

You can get the Toggle Dropdown Options plug-in. If you don't like plug-ins, just copy the JavaScript code from it to your own project's JavaScript file. See the Read the Docs link on the plug-in for more information!

Answer 5

I found one workaround for this, Just wrap with Jquery wrap()) to option you want to hide,it will hidden automatically and unwrap span with unwrap() to show it again.

Answer 6

I tried in many different ways but this solution seems reasonable and I have used in my code. No plugins required simple register function with jquery object

Solution at glance:

(function ($) {


$('#showOne').click(function () {
    $('#ddlNumbers').showHideDropdownOptions('3', true);
});

$('#hideOne').click(function () {
    $('#ddlNumbers').showHideDropdownOptions('3', false);
});

 $.fn.showHideDropdownOptions = function(value, canShowOption) { 

         $(this).find('option[value="' + value + '"]').map(function () {
            return $(this).parent('span').length === 0 ? this : null;
        }).wrap('<span>').hide();

        if (canShowOption) 
            $(this).find('option[value="' + value + '"]').unwrap().show();
        else 
            $(this).find('option[value="' + value + '"]').hide();

}



})(jQuery);

Here is the complete implementation http://jsfiddle.net/8uxD7/3/