Hide options in a select list using jQuery

Question

I have an object with key/value pairs of options I want to hide/remove from a select list. Neither of the following option selectors work. What am I missing?

$.each(results['hide'], function(name, title) {                     
  $("#edit-field-service-sub-cat-value option[value=title]").hide();
  $("#edit-field-service-sub-cat-value option[@value=title]").hide();
});

are you sure the accepted answer works x-browser ;) I would hate anybody else to find this q&a through google and go away with the wrong impression! — redsquare, Commented Aug 13, 2009 at 12:36
@redsquare - that's exactly why I posted a link to another question about hiding option elements in a select not being cross browser :) — Russ Cam, Commented Aug 13, 2009 at 13:09
possible duplicate of jQuery disable SELECT options based on Radio selected (Need support for all browsers) — Liam, Commented Nov 26, 2013 at 16:27
I found that you also have to deselect the selected element if it is hidden after hide() is called in Chrome 57.0 — omarjebari, Commented Apr 12, 2017 at 2:29

chaos · Accepted Answer · 2009-08-13 11:55:55Z

145

For what it's worth, the second form (with the @) doesn't exist in jQuery 1.3. The first isn't working because you're apparently expecting variable interpolation. Try this:

$("#edit-field-service-sub-cat-value option[value=" + title + "]").hide();

Note that this will probably break in various hideous ways if title contains jQuery selector metacharacters.

answered Aug 13, 2009 at 11:55

chaos

123k33 gold badges305 silver badges310 bronze badges

56

Hiding options is not cross-browser compatible.
– mpen
Commented Mar 28, 2011 at 23:04
1

Putting single quotes woudl solve most jquery metacharacter issues
– peterjwest
Commented Aug 16, 2011 at 9:03
12

Here is an answer that works cross browser - with an example here
– Tr1stan
Commented Dec 7, 2011 at 8:39
This concept helped me for another solution. Thanks
– Ajay Kumar
Commented Jul 11, 2018 at 10:26
By weary when hiding <options /> as often this wont update the selected value. You'll need to select a new option after its hidden. If you're working in optgroup gets tricky traversing the DOM.
– png
Commented Sep 14, 2018 at 21:34

Add a comment |

redsquare · Accepted Answer · 2009-08-13 12:11:26Z

81

You cannot do this x-browser. If I recall ie has issues. The easiest thing to do is keep a cloned copy of the select before you remove items, this allows you to easily remove and then append the missing items back.

answered Aug 13, 2009 at 12:11

redsquare

78.4k21 gold badges153 silver badges159 bronze badges

2

getting options back won't be an issue as it's part of a dependent dropdown with ajax calls to the server to update the options each time the change. But is it a case of hide() not working in IE?
– hitfactory
Commented Aug 13, 2009 at 12:31
Indeed ie will not hide them. Not sure about ie8 but certainly one of the ie flavours doesnt work
– redsquare
Commented Aug 13, 2009 at 12:32
The pastebin link example doesn't hide the option in Chrome either
– slolife
Commented Dec 11, 2009 at 23:58
5

Here is an answer that works cross browser - with an example here - I've tested in IE6-9, Chrome and FF
– Tr1stan
Commented Dec 7, 2011 at 8:43
Please see my answer below, working in IE, FF, Chrome and Safari. It is the most flexible option (allowing for different values from displayed text).
– Sablefoste
Commented Nov 20, 2012 at 16:34

Add a comment |

Peter Mortensen · Accepted Answer · 2014-03-22 21:52:43Z

58

I found a better way, and it is very simple:

$("option_you_want_to_hide").wrap('<span/>')

To show again, just find that option(not span) and $("option_you_want_to_show").unwrap().

It was tested on Chrome and Firefox.

edited Mar 22, 2014 at 21:52

Peter Mortensen

31.3k22 gold badges109 silver badges132 bronze badges

answered Jan 13, 2014 at 6:29

William Herry

1,44014 silver badges27 bronze badges

4

You are an absolute genius! Just one row cross browser magic.
– manudea
Commented Dec 20, 2014 at 16:00
Cool. Handles the cross browser problem pretty well.
– Subrat Pattnaik
Commented Jun 1, 2015 at 11:01
1

I upvoted this one but it messes up if not implemented properly: for example you cannot use $("select").val("0").trigger("change"). Easier solution is this
– clod986
Commented Sep 26, 2015 at 11:11
3

You lose too much control using wrap/unwrap. it is easy to accidentally unwrap elements that haven't already been wrapped, hence stripping them of their parent element. Also it can mess up the css selectors. Using show/hide is better though you still need to remember to deselect any selected element as well with: $('selector-for-dropdown').val('');
– omarjebari
Commented Apr 12, 2017 at 2:33
1

I liked the wrap/uwnrap solution. Just need to make sure that we don't double wrap ones that are already wrapped. Similar idea with unwrapped ones.
– anon
Commented May 21, 2018 at 18:51

| Show 5 more comments

Caprica Six · Accepted Answer · 2012-11-20 17:13:25Z

49

Here is my spin, likely a bit faster due to native DOM methods

$.each(results['hide'], function(name, title) {                     
    $(document.getElementById('edit-field-service-sub-cat-value').options).each(function(index, option) {
      if( option.value == title ) {
        option.hidden = true; // not fully compatible. option.style.display = 'none'; would be an alternative or $(option).hide();
      }
    });
});

answered Nov 20, 2012 at 17:13

Caprica Six

1,50012 silver badges11 bronze badges

Add a comment |

Peter Mortensen · Accepted Answer · 2014-03-22 21:57:54Z

It CAN be done cross browser; it just takes some custom programming. Please see my fiddle at http://jsfiddle.net/sablefoste/YVMzt/6/. It was tested to work in Chrome, Firefox, Internet Explorer, and Safari.

In short, I have a hidden field, #optionstore, which stores the array sequentially (since you can't have Associative Arrays in JavaScript). Then when you change the category, it parses the existing options (first time through only) writes them to #optionstore, erases everything, and puts back only the ones associated with the category.

NOTE: I created this to allow different option values from the text displayed to the user, so it is highly flexible.

The HTML:

<p id="choosetype">
    <div>
        Food Category:
    </div>
    <select name="category" id="category" title="OPTIONAL - Choose a Category to Limit Food Types" size="1">
        <option value="">All Food</option>
        <option value="Food1">Fruit</option>
        <option value="Food2">Veggies</option>
        <option value="Food3">Meat</option>
        <option value="Food4">Dairy</option>
        <option value="Food5">Bread</option>
    </select>
    <div>
        Food Selection
    </div>
    <select name="foodType" id="foodType" size="1">
        <option value="Fruit1" class="sub-Food1">Apples</option>
        <option value="Fruit2" class="sub-Food1">Pears</option>
        <option value="Fruit3" class="sub-Food1">Bananas</option>
        <option value="Fruit4" class="sub-Food1">Oranges</option>
        <option value="Veg1" class="sub-Food2">Peas</option>
        <option value="Veg2" class="sub-Food2">Carrots</option>
        <option value="Veg3" class="sub-Food2">Broccoli</option>
        <option value="Veg4" class="sub-Food2">Lettuce</option>
        <option value="Meat1" class="sub-Food3">Steak</option>
        <option value="Meat2" class="sub-Food3">Chicken</option>
        <option value="Meat3" class="sub-Food3">Salmon</option>
        <option value="Meat4" class="sub-Food3">Shrimp</option>
        <option value="Meat5" class="sub-Food3">Tuna</option>
        <option value="Meat6" class="sub-Food3">Pork</option>
        <option value="Dairy1" class="sub-Food4">Milk</option>
        <option value="Dairy2" class="sub-Food4">Cheese</option>
        <option value="Dairy3" class="sub-Food4">Ice Cream</option>
        <option value="Dairy4" class="sub-Food4">Yogurt</option>
        <option value="Bread1" class="sub-Food5">White Bread</option>
        <option value="Bread2" class="sub-Food5">Panini</option>
    </select>
    <span id="optionstore" style="display:none;"></span>
</p>

The JavaScript/jQuery:

$(document).ready(function() {
    $('#category').on("change", function() {
        var cattype = $(this).val();
        optionswitch(cattype);
    });
});

function optionswitch(myfilter) {
    //Populate the optionstore if the first time through
    if ($('#optionstore').text() == "") {
        $('option[class^="sub-"]').each(function() {
            var optvalue = $(this).val();
            var optclass = $(this).prop('class');
            var opttext = $(this).text();
            optionlist = $('#optionstore').text() + "@%" + optvalue + "@%" + optclass + "@%" + opttext;
            $('#optionstore').text(optionlist);
        });
    }

    //Delete everything
    $('option[class^="sub-"]').remove();

    // Put the filtered stuff back
    populateoption = rewriteoption(myfilter);
    $('#foodType').html(populateoption);
}

function rewriteoption(myfilter) {
    //Rewrite only the filtered stuff back into the option
    var options = $('#optionstore').text().split('@%');
    var resultgood = false;
    var myfilterclass = "sub-" + myfilter;
    var optionlisting = "";

    myfilterclass = (myfilter != "")?myfilterclass:"all";

    //First variable is always the value, second is always the class, third is always the text
    for (var i = 3; i < options.length; i = i + 3) {
        if (options[i - 1] == myfilterclass || myfilterclass == "all") {
            optionlisting = optionlisting + '<option value="' + options[i - 2] + '" class="' + options[i - 1] + '">' + options[i] + '</option>';
            resultgood = true;
        }
    }
    if (resultgood) {
        return optionlisting;
    }
}

Could you please explain the use of the resultgood variable? We have removed its use because when the user has a filtered list and the user enters a character that means there are no items to display, an empty list is not actually displayed - the code continues to list the items that matched the search term without the extra character. Our use case differs slightly from the example - we use an input field to accept the entry of a search term. — B5A7, Commented Feb 22, 2018 at 1:20
The resultgood is simply a check to see if any optionlisting was added. if it was, the list of <option>s is returned. If not, nothing is returned, which is what you would want if you accidentally included a class that wasn't actually there (in this example, say, sub-Food6). To return a blank in a drop down, change the declaration line at the start of the function to var optionlisting="<option value=''></option>";. — Sablefoste, Commented Feb 22, 2018 at 2:32
By the way, if I were to write this today, I probably wouldn't use class as the information carrier, but rather the data attribute; it is more semantically correct. — Sablefoste, Commented Feb 22, 2018 at 2:33

Blowsie · Accepted Answer · 2013-03-28 14:59:19Z

This works in Firefox 3.0, but not in MSIE 8, nor in Opera 9.62:

jQuery('#destinations').children('option[value="1"]').hide();
jQuery('#destinations').children('option[value="1"]').css('display','none');

But rather hiding an option, one can simply disable it:

jQuery('#destinations').val('2'); 
jQuery('#destinations').children('option[value="1"]').attr('disabled','disabled');

The first of the the two lines above is for Firefox and pass focus to the 2nd option (assuming it has value="2"). If we omit it, the option is disabled, but the still displays the "enabled" option before we drop it down. Hence, we pass focus to another option to avoid this.

Community · Accepted Answer · 2017-05-23 12:26:19Z

5

Take a look at this question and the answers -

Disable select options...

Looking at your code, you may need to quote the attribute value

$("#edit-field-service-sub-cat-value option[value='title']").hide();

from jQuery attribute selectors

Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like "]"

EDIT:

Just realised that you're getting the title from the function parameter, in which case the syntax should be

$("#edit-field-service-sub-cat-value option[value='" + title + "']").hide();

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Aug 13, 2009 at 11:55

Russ Cam

125k34 gold badges207 silver badges272 bronze badges

Add a comment |

eoleary · Accepted Answer · 2013-12-11 20:43:26Z

5

Your best bet is to set disabled=true on the option items you want to disable, then in CSS set

option:disabled {
    display: none;
}

That way even if the browser doesn't support hiding the disabled item, it still can't be selected.. but on browsers that do support it, they will be hidden.

answered Dec 11, 2013 at 20:43

eoleary

4125 silver badges11 bronze badges

Add a comment |

Steven Poole · Accepted Answer · 2019-06-06 14:21:16Z

Having tested, the solutions posted above by various, including chaos, to hide elements do now work in the latest versions of Firefox (66.0.4), Chrome (74.0.3729.169) and Edge (42.17134.1.0)

$("#edit-field-service-sub-cat-value option[value=" + title + "]").hide();
$("#edit-field-service-sub-cat-value option[value=" + title + "]").show();

For IE, this does not work, however you can disable the option

$("#edit-field-service-sub-cat-value option[value=" + title + "]").attr("disabled", "disabled");
$("#edit-field-service-sub-cat-value option[value=" + title + "]").removeAttr("disabled");

and then force the selection of a different value.

$("#edit-field-service-sub-cat-value").val("0");

Note, for a disabled option, the val of the drop down will now be null, not the value of the selected option if it is disabled.

Timothy Groote · Accepted Answer · 2013-03-26 15:40:02Z

4

In reference to redsquare's suggestion, I ended up doing this:

var selectItems = $("#edit-field-service-sub-cat-value option[value=" + title + "]").detach();

and then to reverse this:

$("#edit-field-service-sub-cat-value").append(selectItems);

edited Mar 26, 2013 at 15:40

Timothy Groote

8,64427 silver badges53 bronze badges

answered Oct 30, 2012 at 21:18

MadTurki

3431 gold badge6 silver badges18 bronze badges

Add a comment |

Oranit Dar · Accepted Answer · 2014-07-31 11:27:08Z

The problem is that Internet Explorer does not seem to support the hide and show methods for select options. I wanted to hide all options of my ddlReasonCode select which did not have the currently selected type as the value of the attribute "attType".

While the lovely Chrome was quite satisfied with:

//Hiding all options
            $("#ddlReasonCode").children().hide();
            //Showing only the relevant options
            $("#ddlReasonCode").children("option[atttype=\"" + CurrentType + "\"]").show();

This is what IE required (kids, don't try this at CHROME :-)):

//Hiding all options
            $("#ddlReasonCode option").each(function (index, val) {
                if ($(this).is('option') && (!$(this).parent().is('span')) && ($(this).atttype != CurrentType))
                    $(this).wrap('<span>').hide();
            });
            //Showing only the relevant options
            $("#ddlReasonCode option").each(function (index, val) {
                if (this.nodeName.toUpperCase() === 'OPTION') {
                    var span = $(this).parent();
                    var opt = this;
                    if ($(this).parent().is('span') && ((this).atttype == CurrentType)) {
                        $(opt).show();
                        $(span).replaceWith(opt);
                    }
                }
            });

I found that wrapping idea at http://ajax911.com/hide-options-selecbox-jquery/

djoeberry · Accepted Answer · 2010-11-17 01:23:37Z

It seems that you also have to update the "selected" attribute. Otherwise the currently selected option may continue to display - although it probably will go away when you actually go to select an option (thats what it did for me): Try doing this:

$('#mySelector').children('option').hide();
$('#mySelector').children('option').removeAttr("selected"); //this may be overkill.
$('#mySelector').children('option[value="'+SelVal+'"]').show();  
$('#mySelector').children(':visible').attr('selected','selected'); //assuming that something is still on the list.

Peter Mortensen · Accepted Answer · 2014-03-22 22:02:32Z

I was trying to hide options from one select-list based on the selected option from another select-list. It was working in Firefox3, but not in Internet Explorer 6. I got some ideas here and have a solution now, so I would like to share:

The JavaScript code

function change_fruit(seldd) {
    var look_for_id=''; var opt_id='';
    $('#obj_id').html("");
    $("#obj_id").append("<option value='0'>-Select Fruit-</option>");
    if(seldd.value=='0') {
        look_for_id='N';
    }
    if(seldd.value=='1'){
        look_for_id='Y';
        opt_id='a';
    }
    if(seldd.value=='2') {
        look_for_id='Y';
        opt_id='b';
    }
    if(seldd.value=='3') {
        look_for_id='Y';
        opt_id='c';
    }

    if(look_for_id=='Y') {
        $("#obj_id_all option[id='"+opt_id+"']").each(function() {
          $("#obj_id").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        });
    }
    else {
        $("#obj_id_all option").each(function() {
          $("#obj_id").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        });
    }
}

The HTML

<select name="obj_id" id="obj_id">
    <option value="0">-Select Fruit-</option>
    <option value="1" id="a">apple1</option>
    <option value="2" id="a">apple2</option>
    <option value="3" id="a">apple3</option>
    <option value="4" id="b">banana1</option>
    <option value="5" id="b">banana2</option>
    <option value="6" id="b">banana3</option>
    <option value="7" id="c">Clove1</option>
    <option value="8" id="c">Clove2</option>
    <option value="9" id="c">Clove3</option>
</select>

<select name="fruit_type" id="srv_type" onchange="change_fruit(this)">
    <option value="0">All</option>
    <option value="1">Starts with A</option>
    <option value="2">Starts with B</option>
    <option value="3">Starts with C</option>
</select>

<select name="obj_id_all" id="obj_id_all" style="display:none;">
    <option value="1" id="a">apple1</option>
    <option value="2" id="a">apple2</option>
    <option value="3" id="a">apple3</option>
    <option value="4" id="b">banana1</option>
    <option value="5" id="b">banana2</option>
    <option value="6" id="b">banana3</option>
    <option value="7" id="c">Clove1</option>
    <option value="8" id="c">Clove2</option>
    <option value="9" id="c">Clove3</option>
</select>

It was checked as working in Firefox 3 and Internet Explorer 6.

According the W3C the id attribute should be unique: id = This attribute assigns a name to an element. This name must be unique in a document. — Jasper, Commented Jan 13, 2012 at 9:22

Alberto Hormazabal · Accepted Answer · 2016-03-04 14:12:51Z

I implemented a solution using a function that filters a combobox (<select>) based on custom data- attributes. This solution supports:

Having an <option> to show when the filter would leave the select empty.
Respects existing selected attributes.
<option> elements without the data-filter attribute are left untouched.

Tested with jQuery 2.1.4 and Firefox, Chrome, Safari and IE 10+.

This is the example HTML:

<select id="myCombobox">
  <option data-filter="1" value="AAA">Option 1</option>
  <option data-filter="1" value="BBB">Option 2</option>
  <option data-filter="2" value="CCC">Option 3</option>
  <option data-filter="2" value="DDD">Option 4</option>
  <option data-filter="3" value="EEE">Option 5</option>
  <option data-filter="3" value="FFF">Option 6</option>
  <option data-filter-emptyvalue disabled>No Options</option>
</select>

The jQuery code for the filtering:

function filterCombobox(selectObject, filterValue, autoSelect) {

  var fullData = selectObject.data("filterdata-values");
  var emptyValue = selectObject.data("filterdata-emptyvalue");

  // Initialize if first time.
  if (!fullData) {
    fullData = selectObject.find("option[data-filter]").detach();
    selectObject.data("filterdata-values", fullData);
    emptyValue = selectObject.find("option[data-filter-emptyvalue]").detach();
    selectObject.data("filterdata-emptyvalue", emptyValue);
    selectObject.addClass("filtered");
  }
  else {
    // Remove elements from DOM
    selectObject.find("option[data-filter]").remove();
    selectObject.find("option[data-filter-emptyvalue]").remove();
  }

  // Get filtered elements.
  var toEnable = fullData.filter("option[data-filter][data-filter='" + filterValue + "']");

  // Attach elements to DOM
  selectObject.append(toEnable);

  // If toEnable is empty, show empty option.
  if (toEnable.length == 0) {
    selectObject.append(emptyValue);
  }

  // Select First Occurrence
  if (autoSelect) {
    var obj = selectObject.find("option[selected]");
    selectObject.val(obj.length == 0 ? toEnable.val() : obj.val());
  }
}

To use it, you just call the function with the value you want to keep.

filterCombobox($("#myCombobox"), 2, true);

Then the resulting select will be:

<select id="myCombobox">
  <option data-filter="2" value="CCC">Option 3</option>
  <option data-filter="2" value="DDD">Option 4</option>
</select>

The original elements are stored by the data() function, so subsequent calls will add and remove the correct elements.

This is a great reusable solution, which is the only one I found which works on Safari. Thanks! — Echilon, Commented Feb 16, 2017 at 9:58

rretzbach · Accepted Answer · 2012-07-28 08:10:12Z

1

To avoid string concatenation you can use jQuery.grep

$($.grep($("#edit-field-service-sub-cat-value option"),
         function(n,i){
           return n.value==title;
         })
 ).hide()

answered Jul 28, 2012 at 8:10

rretzbach

7442 gold badges6 silver badges16 bronze badges

Add a comment |

Squibly · Accepted Answer · 2015-09-16 06:33:26Z

Probably not as elegant or as reusable as a jquery plugin. but another approach is to simply save option elements and swap them out as required:

var SelectFilter = function ()
        {
            this.allOptions = $("#someSelect option");

            this.fooBarOptions= $("#someSelect option[value='foo']");
            this.fooBarOptions= this.fooBarOptions.add($("#someSelect option[value='bar']"));


            this.showFooBarOptions = function()
            {
                $("#someSelect option").remove();
                $("#someSelect").append(this.fooBarOptions);
            };
            this.showAllOptions = function()
            {
                $("#someSelect option").remove();
                $("#someSelect").append(this.allOptions);
            };



        };

do this to use the object:

var filterObject = new SelectFilter();
filterObject.showFooBarOptions ();

clod986 · Accepted Answer · 2015-09-26 11:08:48Z

1

$("option_you_want_to_hide").addClass('hidden')

Then, in your css make sure you have

.hidden{
    display:none;
}

answered Sep 26, 2015 at 11:08

clod986

2,6277 gold badges31 silver badges52 bronze badges

Add a comment |

meder omuraliev · Accepted Answer · 2011-03-24 15:11:25Z

0

The answer points out that @ is invalid for newer jQuery iterations. While that's correct, some older IEs still dont hide option elements. For anyone having to deal with hiding option elements in those versions affected, I posted a workaround here:

http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/

Basically just wrap it with a span and replace on show.

edited Mar 24, 2011 at 15:11

answered Mar 24, 2011 at 3:48

meder omuraliev

186k76 gold badges395 silver badges442 bronze badges

Add a comment |

Charles Wood · Accepted Answer · 2014-06-16 21:58:02Z

0

Anybody stumbling across this question might also consider the use of Chosen, which greatly expands the capabilities of selects.

answered Jun 16, 2014 at 21:58

Charles Wood

8608 silver badges24 bronze badges

Add a comment |

jkjhse · Accepted Answer · 2015-12-13 07:21:18Z

I know this question has been answered. But my requirement was slightly different. Instead of value I wanted to filter by text. So i modified the answer by @William Herry like this.

var array = ['Administration', 'Finance', 'HR', 'IT', 'Marketing', 'Materials', 'Reception', 'Support'];
if (somecondition) {
   $(array).each(function () {
       $("div#deprtmnts option:contains(" + this + ")").unwrap();
   });
}
else{
   $(array).each(function () {
       $("div#deprtmnts option:contains(" + this + ")").wrap('<span/>');
   });
}

This way you can use value also by replacing contains like this

 $("div#ovrcateg option[value=" + this + "]").wrap('<span/>');

DAVIDhaker · Accepted Answer · 2016-06-21 14:26:22Z

0

For hide option in select use:

option_node.hidden = true; # For hide selcet item
option_node.hidden = false; # For show selcet item

Where option_node is HTMLOptionElement

P.S.: I do not use JQuery, but guessing, that it's will works:

$('.my_select option[value="my_cool_value"]').hidden = true

answered Jun 21, 2016 at 14:26

DAVIDhaker

296 bronze badges

IE does not support hide on select options
– RitchieD
Commented Jun 24, 2016 at 12:41
stackoverflow.com/questions/2031740/… P.S.: IE is not browser. IE - programm for download browser! :)
– DAVIDhaker
Commented Jun 26, 2016 at 17:57

Add a comment |

Prashant Pimpale · Accepted Answer · 2019-08-08 06:46:48Z

0

 $('#id').val($('#id option:eq(0)').hide());

option:eq(0)-hide option at index '0' in select box.

edited Aug 8, 2019 at 6:46

Prashant Pimpale

10.6k10 gold badges47 silver badges86 bronze badges

answered Aug 11, 2016 at 6:30

Kiran

11

Add a comment |

Sandeep Sherpur · Accepted Answer · 2019-09-21 06:04:59Z

0

You can show/hide with Value or Class name. Check the below link with working example.
Show/hide jquery chosen options with value or with class name.

answered Sep 21, 2019 at 6:04

Sandeep Sherpur

2,73428 silver badges29 bronze badges

Add a comment |

Hemant yadav · Accepted Answer · 2020-04-28 12:48:40Z

0

$("#ddtypeoftraining option[value=5]").css("display", "none"); $('#ddtypeoftraining').selectpicker('refresh');

answered Apr 28, 2020 at 12:48

Hemant yadav

493 bronze badges

Please add a description to your solution!
– Philipp M
Commented Apr 28, 2020 at 14:27

Add a comment |

Vishal · Accepted Answer · 2018-06-04 09:22:44Z

-1

I found it best to just remove the DOM completely.

$(".form-group #selectId option[value='39']").remove();

Cross browser compatible. Works on IE11 too

answered Jun 4, 2018 at 9:22

Vishal

6058 silver badges12 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Hide options in a select list using jQuery

25 Answers 25

The JavaScript code

The HTML

Not the answer you're looking for? Browse other questions tagged
jquery
html-select
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

25 Answers 25

The JavaScript code

The HTML

Not the answer you're looking for? Browse other questions tagged jqueryhtml-select or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
jquery
html-select
or ask your own question.