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

问题描述

我在第一个下拉菜单中有以下代码:

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.

第二个下拉选项都将进入mySQL DB中的同一列(子类别)，因此，子类别"列上的小汽车"不能具有黑色"值，或者子类别"列中的卡车"都不能具有红色"值.

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.

谢谢

推荐答案

工作示例: 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 函数:

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

这篇关于HTML表单的第一个下拉菜单会自动更改第二个下拉菜单选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！