Question

昨天我问我如何为子类别生成第二个下拉列表，所以在第一个下拉列表中我会选择＆＃34; Trucks＆＃34;第二个下拉列表会出现颜色＆＃34; Black＆＃34;或＆＃34;怀特＆＃34;选择或者如果在第一个下拉列表中我选择＆＃34; Cars＆＃34;第二个生成的下拉列表将包含＆＃34; Red＆＃34;，＆＃34; Green＆＃34;或＆＃34;蓝＆＃34;选项，这导致我在我的代码中实现的http://jsfiddle.net/7YeL6/5/并且像魅力一样工作（我已经在＆＃34; .js＆＃34中添加了更多结果;并且正在100％工作）。

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

根据之前的代码，我需要根据第二个下拉列表显示第三个下拉列表，例如：如果我选择＆＃34; Trucks＆＃34;，那么＆＃34; Black＆＃34;新的下拉菜单似乎会选择＆＃34; New＆＃34;或＆＃34;使用＆＃34;或者如果我选择＆＃34;汽车＆＃34;，然后＆＃34;红＆＃34;新的下拉菜单似乎会选择＆＃34;购买＆＃34;或＆＃34;租＆＃34;。

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

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

})
});

由于

Answer 1

看起来你想改为

演示：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代码

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

下拉列表中的HTML列出了第三类

1 个答案: