HTML Form first dropdown auto change the second dropdown options - html

Question

I have this code on the first dropdown:
<td align="left" style="padding-bottom:10px">
<select name="category" id="category">
<option selected value="Please Select">Please Select</option>
<option value="Cars">Cars</option>
<option value="Trucks">Trucks</option>
<option value="Motorcycles">Motorcycles</option>
<option value="Boats">Boats</option>
</select>
</td>
and i also have a second category with different colors for the previous option.
For example:
If i select Cars the second dropdown will appear to select "Red", "Green" or "Blue" but if i select Trucks the second dropdown will appear to select "Black" or "White" options only.
Both second dropdown options will go to the same column (Subcategory) in the mySQL DB so no Car can have the value "Black" on Subcategory column or no Truck can have the value "Red" on Subcategory column.
Thanks

Answer 1

Working example: http://jsfiddle.net/7YeL6/4/
Given this structure:
<select name="category" id="category">
<option selected value="Please Select">Please Select</option>
<option value="Cars">Cars</option>
<option value="Trucks">Trucks</option>
<option value="Motorcycles">Motorcycles</option>
<option value="Boats">Boats</option>
</select>
<div>
<select name="category2" id="truck" class="second">
<option value="white">white</option>
<option value="black">black</option>
</select>
<select name="category2" id="car" class="second">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
</select>
</div>
You could use jQuery .change function:
$("#category").change(function () {
var str = "";
str = $("select#category option:selected").text();
if(str == "Trucks"){
$("select.second").not("#truck").hide();
$("#truck").show();
$("#truck").fadeIn(1000);
}
else if(str == "Cars"){
$("select.second").not("#car").hide();
$("#car").show();
$("#car").fadeIn(1000);
}
})
CSS
#category2{
display: none;
}