jQuery show hide options from one select drop down when option on other select dropdown is slected

Question

I need to show hide options on one select drop down dependant on another select drop down options   The code below shows what I am trying to achieve   If the  column select  select menu option is set to  1 column  then the  layout select  select menu must display only the  none  option    If the  column select  select menu option is set to  2 column  then the  layout select  select menu must display only the  layout 1  and  layout 2  options   If the  column select  select menu option is set to  3 column  then the  layout select  select menu must display only the  layout 3    layout 4  and  layout 5  options    lt select name  column select  id  column select  gt       lt option value  col1  gt 1 column lt  option gt       lt option value  col2  gt 2 column lt  option gt       lt option value  col3  gt 3 column lt  option gt   lt  select gt    lt select name  layout select  id  layout select  gt       lt  --Below shows when  1 column  is selected is hidden otherwise-- gt       lt option value  col1  gt none lt  option gt        lt  --Below shows when  2 column  is selected is hidden otherwise-- gt       lt option value  col2 ms  gt layout 1 lt  option gt        lt option value  col2 sm  gt layout 2 lt  option gt        lt  --Below shows when  3 column  is selected is hidden otherwise-- gt       lt option value  col3 mss  gt layout 3 lt  option gt       lt option value  col3 ssm  gt layout 4 lt  option gt       lt option value  col3 sms  gt layout 5 lt  option gt   lt  select gt    So far everything I have tried has failed abysmally     I am new to jQuery  If anybody could please help it would be much appreciated  Thanks

User · Accepted Answer

Try -       column select   change function              layout select   children  option   hide            layout select   children  option value        this  val          show          If you were going to use this solution you d need to hide all of the elements apart from the one with the  none  value in your document ready function -     document  ready function             layout select   children  option gt 0    hide            column select   change function                 layout select   children  option   hide                layout select   children  option value        this  val          show               Demo - http   jsfiddle net Mxkfr 2  EDIT  I might have got a bit carried away with this  but here s a further example that uses a cache of the original select list options to ensure that the  layout select  list is completely reset cleared  including the  none  option  after the  column select  list is changed -    document  ready function         var optarray       layout select   children  option   map function             return                value   this value               option     lt option value      this value      gt     this text     lt  option gt                             column select   change function                 layout select   children  option   remove            var addoptarr               for  i   0  i  lt  optarray length  i                  if  optarray i  value indexOf   this  val     gt  -1                    addoptarr push optarray i  option                                       layout select   html addoptarr join             change         Demo - http   jsfiddle net N7Xpb 1

User · Answer

Initialy both dropdown have same option  the option you select in firstdropdown is hidden in seconddropdown  value  is custom attribute which is unique       seconddropdown option    each function         if    this  attr  value        firstdropdown  option selected   attr  value                 this  hide              this  siblings   show

User · Answer

find the first select and bind a click handler     column select   bind  click   function           retrieve the selected value     var value     this  val               build a regular expression that does a head-match         expression   new RegExp       value              find the second select          select       layout select           hide all children   lt option gt s  of the second select         check each element s value agains the regular expression built from the first select s value        show elements that match the expression      select children   hide   filter function          return     this  val   match expression          show           this is far from perfect  but should get you there

User · Answer

And in 2016     I do this  which works in all browsers and does not create  illegal  html    For the drop-down select that is to show hide different values add that value as a data attribute    lt select id  animal  gt       lt option value  1  selected  selected  gt Dog lt  option gt       lt option value  2  gt Cat lt  option gt   lt  select gt   lt select id  name  gt       lt option value    gt  lt  option gt       lt option value  1  data-attribute  1  gt Rover lt  option gt       lt option value  2  selected  selected  data-attribute  1  gt Lassie lt  option gt       lt option value  3  data-attribute  1  gt Spot lt  option gt       lt option value  4  data-attribute  2  gt Tiger lt  option gt       lt option value  5  data-attribute  2  gt Fluffy lt  option gt   lt  select gt    Then in your jQuery add a change event to the first drop-down select to filter the second drop-down       animal   change  function         filterSelectOptions     name     data-attribute     this  val           And the magic part is this little jQuery utility   function filterSelectOptions selectElement  attributeName  attributeValue        if  selectElement data  currentFilter      attributeValue            selectElement data  currentFilter   attributeValue           var originalHTML   selectElement data  originalHTML            if  originalHTML              selectElement html originalHTML          else               var clone   selectElement clone                clone children  option selected    removeAttr  selected                selectElement data  originalHTML   clone html                       if  attributeValue                selectElement children  option not      attributeName          attributeValue        not      attributeName          remove                        This little gem tracks the current filter  if different it restores the original select  all items  and then removes the filtered items   If the filter item is empty we see all items

User · Answer

How about    Updated       column select   change function              layout select            find  option            show            not  option value       this value         hide             layout select   val              layout select   find  option visible first   val         change       assuming the third option should have a value col3   Example  http   jsfiddle net cL2tt   Notes    Use the  change   event to define an event handler that executes when the value of select column select changes   show   all options in the second select   hide   all options in the second select whose value does not contain the value of the selected option in select column select  using the attribute contains selector

User · Answer

A litle late perhaps but I would suggest    document  ready function         var layout select html       layout select   html      save original dropdown list          column select   change function              var cur column val     this  val      save the selected value of the first dropdown             layout select   html layout select html     set original dropdown list back             layout select   children  option   each function      loop through options         if   this  val   indexOf cur column val    -1     do your conditional and if it should not be in the dropdown list              this  remove      remove option from list

[javascript] jQuery show/hide options from one select drop down, when option on other select dropdown is slected

Examples related to javascript

Examples related to jquery