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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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 nbsp 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    lt p id  choosetype  gt       lt div gt          Food Category       lt  div gt       lt select name  category  id  category  title  OPTIONAL - Choose a Category to Limit Food Types  size  1  gt           lt option value    gt All Food lt  option gt           lt option value  Food1  gt Fruit lt  option gt           lt option value  Food2  gt Veggies lt  option gt           lt option value  Food3  gt Meat lt  option gt           lt option value  Food4  gt Dairy lt  option gt           lt option value  Food5  gt Bread lt  option gt       lt  select gt       lt div gt          Food Selection      lt  div gt       lt select name  foodType  id  foodType  size  1  gt           lt option value  Fruit1  class  sub-Food1  gt Apples lt  option gt           lt option value  Fruit2  class  sub-Food1  gt Pears lt  option gt           lt option value  Fruit3  class  sub-Food1  gt Bananas lt  option gt           lt option value  Fruit4  class  sub-Food1  gt Oranges lt  option gt           lt option value  Veg1  class  sub-Food2  gt Peas lt  option gt           lt option value  Veg2  class  sub-Food2  gt Carrots lt  option gt           lt option value  Veg3  class  sub-Food2  gt Broccoli lt  option gt           lt option value  Veg4  class  sub-Food2  gt Lettuce lt  option gt           lt option value  Meat1  class  sub-Food3  gt Steak lt  option gt           lt option value  Meat2  class  sub-Food3  gt Chicken lt  option gt           lt option value  Meat3  class  sub-Food3  gt Salmon lt  option gt           lt option value  Meat4  class  sub-Food3  gt Shrimp lt  option gt           lt option value  Meat5  class  sub-Food3  gt Tuna lt  option gt           lt option value  Meat6  class  sub-Food3  gt Pork lt  option gt           lt option value  Dairy1  class  sub-Food4  gt Milk lt  option gt           lt option value  Dairy2  class  sub-Food4  gt Cheese lt  option gt           lt option value  Dairy3  class  sub-Food4  gt Ice Cream lt  option gt           lt option value  Dairy4  class  sub-Food4  gt Yogurt lt  option gt           lt option value  Bread1  class  sub-Food5  gt White Bread lt  option gt           lt option value  Bread2  class  sub-Food5  gt Panini lt  option gt       lt  select gt       lt span id  optionstore  style  display none   gt  lt  span gt   lt  p gt    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  lt  options length  i   i   3            if  options i - 1     myfilterclass    myfilterclass     all                 optionlisting   optionlisting     lt option value      options i - 2       class      options i - 1       gt     options i      lt  option gt                resultgood   true                      if  resultgood            return optionlisting

User · Answer

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    amp  amp      this  parent   is  span     amp  amp     this  atttype    CurrentType                         this  wrap   lt span gt    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    amp  amp    this  atttype    CurrentType                               opt  show                              span  replaceWith opt                                                             I found that wrapping idea at http   ajax911 com hide-options-selecbox-jquery

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   lt span  gt                This way you can use value also by replacing contains like this      div ovrcateg option value     this        wrap   lt span  gt

User · Answer

id   val     id option eq 0    hide       option eq 0 -hide option at index  0  in select box

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

ddtypeoftraining option value 5    css  display    none        ddtypeoftraining   selectpicker  refresh

User · Answer

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 nbsp 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   lt option value  0  gt -Select Fruit- lt  option gt         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   lt option value      this  val      gt     this  text     lt  option gt                           else               obj id all option   each function                   obj id   append   lt option value      this  val      gt     this  text     lt  option gt                           The HTML   lt select name  obj id  id  obj id  gt       lt option value  0  gt -Select Fruit- lt  option gt       lt option value  1  id  a  gt apple1 lt  option gt       lt option value  2  id  a  gt apple2 lt  option gt       lt option value  3  id  a  gt apple3 lt  option gt       lt option value  4  id  b  gt banana1 lt  option gt       lt option value  5  id  b  gt banana2 lt  option gt       lt option value  6  id  b  gt banana3 lt  option gt       lt option value  7  id  c  gt Clove1 lt  option gt       lt option value  8  id  c  gt Clove2 lt  option gt       lt option value  9  id  c  gt Clove3 lt  option gt   lt  select gt    lt select name  fruit type  id  srv type  onchange  change fruit this   gt       lt option value  0  gt All lt  option gt       lt option value  1  gt Starts with A lt  option gt       lt option value  2  gt Starts with B lt  option gt       lt option value  3  gt Starts with C lt  option gt   lt  select gt    lt select name  obj id all  id  obj id all  style  display none   gt       lt option value  1  id  a  gt apple1 lt  option gt       lt option value  2  id  a  gt apple2 lt  option gt       lt option value  3  id  a  gt apple3 lt  option gt       lt option value  4  id  b  gt banana1 lt  option gt       lt option value  5  id  b  gt banana2 lt  option gt       lt option value  6  id  b  gt banana3 lt  option gt       lt option value  7  id  c  gt Clove1 lt  option gt       lt option value  8  id  c  gt Clove2 lt  option gt       lt option value  9  id  c  gt Clove3 lt  option gt   lt  select gt    It was checked as working in Firefox 3 and Internet nbsp Explorer 6

User · Answer

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

User · Answer

I implemented a solution using a function that filters a combobox   lt select gt   based on custom data- attributes  This solution supports     Having an  lt option gt  to show when the filter would leave the select empty  Respects existing selected attributes   lt option gt  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    lt select id  myCombobox  gt     lt option data-filter  1  value  AAA  gt Option 1 lt  option gt     lt option data-filter  1  value  BBB  gt Option 2 lt  option gt     lt option data-filter  2  value  CCC  gt Option 3 lt  option gt     lt option data-filter  2  value  DDD  gt Option 4 lt  option gt     lt option data-filter  3  value  EEE  gt Option 5 lt  option gt     lt option data-filter  3  value  FFF  gt Option 6 lt  option gt     lt option data-filter-emptyvalue disabled gt No Options lt  option gt   lt  select gt    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    lt select id  myCombobox  gt     lt option data-filter  2  value  CCC  gt Option 3 lt  option gt     lt option data-filter  2  value  DDD  gt Option 4 lt  option gt   lt  select gt    The original elements are stored by the data   function  so subsequent calls will add and remove the correct elements

User · Answer

option you want to hide   addClass  hidden     Then  in your css make sure you have   hidden      display none

User · Answer

I found it best to just remove the DOM completely       form-group  selectId option value  39     remove      Cross browser compatible  Works on IE11 too

User · Answer

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

User · Answer

I found a better way  and it is very simple      option you want to hide   wrap   lt span  gt      To show again  just find that option not span  and    option you want to show   unwrap     It was tested on Chrome and Firefox

User · Answer

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

[jquery] Hide options in a select list using jQuery

Examples related to jquery

Examples related to html-select

Examples related to jquery-selectbox