jQuery show/hide drop-down options based on anothe

Question

I am trying to create a drop-down select menu that will consist of three select boxes, where the 3rd box will show/hide specific option based on an option selected in the 1st select box.

I was wondering if anyone here is be able to suggest a solution to this.

Here is a simplified version of the 3 select boxes I have:

<select class="product" id="select_1" name="product">
  <option selected="selected" value=""> Choose Category </option>
  <option value="Mens Suits"> Mens Suits </option>
  <option value="Womens Suit"> Womens Suits </option>
  <option value="Children Suit"> Children Suits </option>
</select>

<select class="color" id="select_2" name="color">
  <option selected="selected" value=""> Choose Color </option>
  <option value="Blue">Blue</option>
  <option value="Red">Red</option>
  <option value="Green">Green</option>
</select>

<select class="size" id="select_3" name="size">
  <option selected="selected" value=""> Choose Size </option>
  <!-- Mens Sizes Below -->
  <option value="36">36</option>
  <option value="38">38</option>
  <option value="40">40</option>
  <!-- Womens Sizes Below -->
  <option value="30">30</option>
  <option value="29">29</option>
  <option value="28">28</option>
  <!-- Children Sizes Below -->
  <option value="12">12</option>
  <option value="11">11</option>
  <option value="10">10</option>
</select>

With the example above, I would like to be able to view the first 3 options from the 3rd select box (36, 38, and 40) when the option Mens Suits from the 1st select box is chosen. Similarly, when the Womens Suits is selectedfrom the 1st box, the options 30, 29, and 28 should be visible in the 3rd box. The same with the Children Suits.

I hope this makes sense. Thank you.

Answer 1

Try this:

Html:

<select class="product" id="select_1" name="product">
  <option selected="selected" value=""> Choose Category </option>
  <option value="Mens Suits"> Mens Suits </option>
  <option value="Womens Suit"> Womens Suits </option>
  <option value="Children Suit"> Children Suits </option>
</select>

<select class="color" id="select_2" name="color">
  <option selected="selected" value=""> Choose Color </option>
  <option value="Blue">Blue</option>
  <option value="Red">Red</option>
  <option value="Green">Green</option>
</select>

<select class="size" id="select_3" name="size">
  <option selected="selected" value=""> Choose Size </option>
  <!-- Mens Sizes Below -->
  <option value="Mens_36">36</option>
  <option value="Mens_38">38</option>
  <option value="Mens_40">40</option>
  <!-- Womens Sizes Below -->
  <option value="Womens_30">30</option>
  <option value="Womens_29">29</option>
  <option value="Womens_28">28</option>
  <!-- Children Sizes Below -->
  <option value="Children_12">12</option>
  <option value="Children_11">11</option>
  <option value="Children_10">10</option>
</select>

JQuery:

 $(document).ready(function() {
    $("#select_3").children('option:gt(0)').hide();
    $("#select_1").change(function() {
        $("#select_3").children('option').hide();
        $("#select_3").children("option[value^=" + $(this).val().split(" ")[0] + "]").show()
    })
})

Working Fiddle