html - HTML表单的第一个下拉菜单会自动更改第二个下拉菜单选项

我在第一个下拉列表中有这个代码：

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

我还有第二个类别，前一个选项有不同的颜色。
例如：
如果我选择汽车，则第二个下拉列表将显示为选择“红色”、“绿色”或“蓝色”，但如果我选择卡车，则第二个下拉列表将显示为仅选择“黑色”或“白色”选项。
这两个第二个下拉选项将转到mySQL数据库中的同一列（子类别），因此没有汽车可以在子类别列上具有“Black”值，也没有卡车可以在子类别列上具有“Red”值。
谢谢

最佳答案

工作示例：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;
}

关于html - HTML表单的第一个下拉菜单会自动更改第二个下拉菜单选项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15620283/