HTML表单第一个下拉自动改变第二个下拉选项

Question

我对第一个下拉验证码：

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

，我也有不同颜色的前一选项第二类。 例如： 如果我选择Cars，第二个下拉菜单将显示为选择“红色”，“绿色”或“蓝色”，但是如果我选择卡车，第二个下拉菜单将显示为仅选择“黑色”或“白色”选项。

第二个下拉选项将会到mySQL DB中的同一列（子类别），因此没有Car在子类别列上具有值“Black”或没有在子类别列上具有值“Red”的值。

感谢

Answer 1

工作例如：http://jsfiddle.net/7YeL6/4/

鉴于这种结构：

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

您可以使用jQuery .change功能：

 $("#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; 
}