jQuery show/hide drop-down options based on another drop-down option

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 1s

Answer 1

Try this:

Html:

   Choose Category 
   Mens Suits 
   Womens Suits 
   Children Suits 



   Choose Color 
  Blue
  Red
  Green



   Choose Size 
  
  36
  38
  40
  
  30
  29
  28
  
  12
  11
  10

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