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

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

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.