0

昨天我问我如何为子类别生成第二个下拉列表，所以在第一个下拉列表中我会选择“卡车”，第二个下拉列表会出现“黑色”或“白色”颜色可供选择，或者如果在第一个下拉列表中我选择“汽车”，第二个生成的下拉菜单将具有“红色”、“绿色”或“蓝色”选项，这会导致我在代码中实现的http://jsfiddle.net/7YeL6/5/并像魅力（我已经在“.js”中添加了更多结果并且正在 100% 工作）。

但现在我面临一个新问题，因为我需要生成第三个类别，而我对 jquery 一无所知。

基于前面的代码，我需要根据第二个下拉列表显示第三个下拉列表，例如：如果我选择“卡车”，那么“黑色”将出现一个新的下拉列表以选择“新”或“使用”，或者如果我选择“汽车”，然后“红色”，将出现一个新的下拉菜单以选择“购买”或“租赁”。

代码

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

#category2{
    display: none;
}
.second{
    display: none;

}

JS代码

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

})
});

谢谢

4

1 回答 1

1

看起来你想要这个

演示：http: //jsfiddle.net/7YeL6/7/

代码

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

.second{
    display: none;
}
.third{
    display: none;
}

查询代码

$(".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();
})
于 2013-03-26T17:38:51.907 回答