HTML列出第三類

Question

昨天我問我怎麼能生成一個子類第二下拉列表，所以在第一個下拉列表，我會選擇「卡車」和第二個下拉將與顏色「黑」或「白出現「來接，或者如果在第一個下拉我選擇‘汽車’所生成的第二下拉將產生‘紅’，‘綠’或‘藍’的選項，導致這種http://jsfiddle.net/7YeL6/5/，我在我的代碼實現的，就像一個魅力（我已經把更多的結果放在「.js」中，並且工作在100％）。

但我現在面臨一個新的問題，因爲我需要生成一個第三類，我不知道的jQuery什麼。

根據以前的代碼，我需要第三個下拉菜單，以第二個下拉菜單爲例，例如： 如果我選擇「卡車」，然後選擇「新建」或「二手」，或者如果我選擇‘汽車’，那麼‘紅’的新下拉菜單會出現選擇‘買入’或‘租’。

HTML代碼

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

}) 
}); 

感謝

Answer 1

它看起來像你想這不是

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

HTML代碼

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

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