HTML from dropdown lists third category - php

Question

Yesterday i asked how i could generate a second dropdown list for a subcategory, so in the first dropdown i would select "Trucks" and a second dropdown would appear with the colors "Black" or "White" to pick or if in the first dropdown i select "Cars" the second generated dropdown would have "Red", "Green" or "Blue" options, that lead to this http://jsfiddle.net/7YeL6/5/ that i implemented in my code and works like a charm (i already put more results in the ".js" and is working 100%).
But now im facing a new problem because i need to generate a third category and i dont know anything about jquery.
Based on the previous code, i need a third dropdown to appear based on the second dropdown so for example:
If i select "Trucks", then "Black" a new dropdown will appear to select "New" or "Used" or if i select "Cars", then "Red" a new dropdown will appear to select "Buy" or "Rent".
HTML CODE
<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>
CSS CODE
#category2{
display: none;
}
.second{
display: none;
}
JS CODE
$(document).ready(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);
}
})
});
Thanks

Answer 1

It looks like you wanted to this instead
Demo: http://jsfiddle.net/7YeL6/7/
HTML CODE
<select id="category" class="first">
<option selected value="Please Select">Please Select</option>
<option value="car">Cars</option>
<option value="truck">Trucks</option>
<option value="motor">Motorcycles</option>
<option value="boat">Boats</option>
</select>
<select id="truck" class="second">
<option selected value="Please Select">Please Select</option>
<option value="white">white</option>
<option value="black">black</option>
</select>
<select id="car" class="second">
<option selected value="Please Select">Please Select</option>
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
</select>
<select id="truck-white" class="third">
<option value="size1">truck-white1</option>
<option value="size2">truck-white2</option>
</select>
<select id="truck-black" class="third">
<option value="size1">truck-black1</option>
<option value="size2">truck-black2</option>
</select>
<select id="car-red" class="third">
<option value="1">car-red1</option>
<option value="2">car-red2</option>
<option value="3">car-red3</option>
</select>
<select id="car-green" class="third">
<option value="1">car-green1</option>
<option value="2">car-green2</option>
<option value="3">car-green3</option>
</select>
CSS CODE
.second{
display: none;
}
.third{
display: none;
}
JQuery CODE
$(".first").change(function () {
var str = "";
str = $(this).val();
$('.second').hide();
$('.third').hide();
$('#'+str).show();
});
$(".second").change(function () {
var str = "";
str = $(this).val();
var id = $(this).attr('id');
$('.third').hide();
$('#' + id + "-" + str).show();
})