Hide Select Option in Ie Using Jquery

How to Hide and Show SELECT Options with JQuery in IE

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') ? '<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/

jQuery Hide options in a select list

(function($){  var $country = $('#Content_C003_Country');  var $state = $('#Content_C003_State');  var $stateOptions = $state.children();    $country.on('change', function(){    //remove the options    $stateOptions.detach();    //readd only the options for the country    $stateOptions.filter(function(){      return this.value.indexOf($country.val() + "-") === 0;    }).appendTo($state);    //clear out the value so it doesn't default to one it should not    $state.val('');  });}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select id="Content_C003_Country" class="searchFieldDrop">  <option value="36">Canada</option>  <option value="222">United States</option></select>
<select id="Content_C003_State" class="searchFieldDrop">  <option value="36-AB">Alberta</option>  <option value="36-BC">British Columbia</option>  <option value="36-MB">Manitoba</option>  <option value="222-AZ">Arizona</option>  <option value="222-AR">Arkansas</option>  <option value="222-CA">California</option></select>

Hiding Options of a Select with JQuery

The hide() doesn't work for Chrome... I've been experimenting with a work-around and wrapped it in a plugin I called "ExtraBox". The idea is to store the options temporary so we can enable / disable them by manipulating the DOM. I've created the plugin to make it easier to use.

I've posted the code on jsFiddle, so you can try it for yourself: http://jsfiddle.net/KeesCBakker/HaFRC/. [note: first project in jsFiddle, I'm loving it!]

Html example:

Select:
<br/>
<select id="TestKees">
    <option value="1" class="s1">First value</option>
    <option value="2" class="s2">Second value</option>
    <option value="3" class="s3">Third value</option>
</select>
<br/>
Enable / Disable
<br/>
<input id="txt" type="text" value="s2" />
<button id="btnEnable">Enable</button>

I've added the following jQuery to my document.ready function:

$('#TestKees').extraBox({ attribute: 'class' });

$('#btnEnable').click(function(){
    $('#TestKees').data('extraBox').enable(
        $('#txt').val()
    );
});

$('#btnDisable').click(function(){
    $('#TestKees').data('extraBox').disable(
        $('#txt').val()
    );  
});

The plugin looks like this:

(function($) {

    // Create ExtraBox object
    function ExtraBox(el, options) {

        // Default options for the plugin (configurable)
        this.defaults = {
            attribute: 'class'
        };
        // Combine default and options objects
        this.opts = $.extend({}, this.defaults, options);

        // Non-configurable variables
        this.$el = $(el);
        this.items = new Array();
    };

    // Separate functionality from object creation
    ExtraBox.prototype = {

        init: function() {
            var _this = this;
            $('option', this.$el).each(function(i, obj) {
                var $el = $(obj);
                $el.data('status', 'enabled');
                _this.items.push({
                    attribute: $el.attr(_this.opts.attribute),
                    $el: $el
                });
            });
        },
        disable: function(key){
            $.each(this.items, function(i, item){
                if(item.attribute == key){
                     item.$el.remove();
                     item.$el.data('status', 'disabled'); 
                } 
            });
        },
        enable: function(key){
            var _this = this;
            $.each(this.items, function(i, item){
                if(item.attribute == key){

                    var t = i + 1; 
                    while(true)
                    {
                        if(t < _this.items.length) {   
                            if(_this.items[t].$el.data('status') == 'enabled')  {
                                _this.items[t].$el.before(item.$el);
                                item.$el.data('status', 'enabled');
                                break;
                            }
                            else {
                               t++;
                            }   
                        }
                        else {                                                                               _this.$el.append(item.$el);
                            item.$el.data('status', 'enabled');
                            break;
                        }                   
                    }
                } 
            });     
        }
    };

    // The actual plugin - make sure to test
    // that the element actually exists.
    $.fn.extraBox = function(options) {

        if (this.length) {
            this.each(function() {
                var rev = new ExtraBox(this, options);
                rev.init();
                $(this).data('extraBox', rev);
            });
        }
    };
})(jQuery);

Hide options in select element, not working in IE?

The notion of hidden options in a select doesn't exist in IE. You would have to manually remove and re-add the entries, which may be somewhat of an inconvenience.

Another solution would be to also disable the elements:

slanor.find(option).hide().prop('disabled', true);

This will hide the option in all browsers that support it, but disable it in IE, which means it'll still be visible, but visually distinguished from the other options, and un-selectable.

However: if your problem is exactly as you have described, and there are only two options that your script will vary on, the simplest solution might be to hide and show two different dropdowns entirely, depending on which option is selected.

---

Related Topics