how to change a selections options based on another select option selected

Question

here is my html    lt select id  type  gt   lt option value  item1  gt item1 lt  option gt   lt option value  item2  gt item2 lt  option gt   lt option value  item3  gt item3 lt  option gt   lt  select gt    lt select id  size  gt   lt option value    gt -- select one --  lt  option gt   lt  select gt    here is the jquery i tried but was unsuccessful     document  ready function      if      type   val  item1            size   html   lt option value  test  gt test lt  option gt  lt option value  test2  gt test2 lt  option gt      elseif      type   val  item2             size   html   lt option value  anothertest1  gt anothertest1 lt  option gt              basically what i m trying to do is if an option is selected in  type then the size select is populated with options associated to it  how can i do this   thanks

User · Accepted Answer

Here is an example of what you are trying to do => fiddle

_x000D_

$(document).ready(function () {_x000D_
    $("#type").change(function () {_x000D_
        var val = $(this).val();_x000D_
        if (val == "item1") {_x000D_
            $("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");_x000D_
        } else if (val == "item2") {_x000D_
            $("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");_x000D_
        } else if (val == "item3") {_x000D_
            $("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");_x000D_
        } else if (val == "item0") {_x000D_
            $("#size").html("<option value=''>--select one--</option>");_x000D_
        }_x000D_
    });_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<select id="type">_x000D_
    <option value="item0">--Select an Item--</option>_x000D_
    <option value="item1">item1</option>_x000D_
    <option value="item2">item2</option>_x000D_
    <option value="item3">item3</option>_x000D_
</select>_x000D_
_x000D_
<select id="size">_x000D_
    <option value="">-- select one -- </option>_x000D_
</select>

_x000D_

User · Answer

as a complementary answer to  Navid pdp11  which will enable to select the first visible item and work on document load as well  put the following below your body tag   lt script gt      mainCat   on  change   function         let selected     this  val            expertCat option   each function            let element      this            if  element data  tag      selected               element removeClass  visible                element addClass  hidden                element hide              else              element removeClass  hidden                element addClass  visible                element show                          let expertCat       expertCat        expertCat prop  selectedIndex  expertCat find  option visible eq 0    index        triggerHandler  change     lt  script gt

User · Answer

Here is my simple solution using Jquery filters       publisher   on  change   function e       let selector     this  val           site  gt  option   hide           site  gt  option   filter function   return   this  data  pub      selector   show          JSFIDDLE

User · Answer

Your if statement is setting the value  You want to compare it by doing this  if      type   val       item1              daLizard is right though  You want an event handler  document ready runs only once  when the page DOM is ready to be used

User · Answer

You can use switch case like this    x000D   x000D    document  ready function      x000D        type   change function      x000D       switch   this  val      x000D          case  item1   x000D                  size   html   lt option value  test  gt item1  test 1 lt  option gt  lt option value  test2  gt item1  test 2 lt  option gt     x000D              break  x000D          case  item2   x000D                  size   html   lt option value  test  gt item2  test 1 lt  option gt  lt option value  test2  gt item2  test 2 lt  option gt     x000D              break  x000D          case  item3   x000D                  size   html   lt option value  test  gt item3  test 1 lt  option gt  lt option value  test2  gt item3  test 2 lt  option gt     x000D              break  x000D          default  x000D                  size   html   lt option value    gt --select one-- lt  option gt     x000D         x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select id  type  gt  x000D       lt option value  item0  gt --Select an Item-- lt  option gt  x000D       lt option value  item1  gt item1 lt  option gt  x000D       lt option value  item2  gt item2 lt  option gt  x000D       lt option value  item3  gt item3 lt  option gt  x000D   lt  select gt  x000D   x000D   lt select id  size  gt  x000D       lt option value    gt -- select one --  lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

I don t quote understand what you are trying to achieve  but you need an event listener  Something like       type   change function        alert  Value changed to       this  attr  value           This will give you the value of the selected option tag

User · Answer

you can use data-tag in html5 and do this using this code    x000D   x000D   lt script gt  x000D       mainCat   on  change   function     x000D    var selected     this  val    x000D        expertCat option   each function item   x000D     console log selected      x000D     var element      this     x000D     console log element data  tag       x000D     if  element data  tag      selected   x000D      element hide      x000D      else  x000D      element show    x000D       x000D          x000D     x000D        expertCat   val     expertCat option visible first   val     x000D     x000D      x000D   lt  script gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 3 jquery min js  gt  lt  script gt  x000D   lt select id  mainCat  gt  x000D      lt option value    1  gt navid lt  option gt  x000D      lt option value    2  gt javad lt  option gt  x000D      lt option value    3  gt mamal lt  option gt  x000D     lt  select gt  x000D     x000D     lt select id  expertCat  gt  x000D      lt option  value    1  data-tag  2  gt UI lt  option gt  x000D      lt option  value    2  data-tag  2  gt Java Android lt  option gt  x000D      lt option  value    3  data-tag  1  gt Web lt  option gt  x000D      lt option  value    3  data-tag  1  gt Server lt  option gt  x000D      lt option  value    3  data-tag  3  gt Back End lt  option gt  x000D      lt option  value    3  data-tag  3  gt  net lt  option gt  x000D     lt  select gt  x000D   x000D   x000D

[jquery] how to change a selections options based on another select option selected?

Examples related to jquery