如何基於前兩個相關下拉菜單的結果自動填充下拉菜單

Question

如果存在三個下拉菜單，則第三個菜單依賴於第二個和第一個下拉菜單。前兩個填寫例如第一個下拉菜單的字段是汽車製造商，第二個字段是汽車類型（汽車，貨車，卡車），第三個是基於前兩個下拉列表的模型列表'選擇。比方說，我選擇本田作爲汽車類型的製造和卡車。第三個下降的唯一選擇是本田Ridgeline？ 我的問題是，如果最終下拉菜單中只有一個選項是由於之前的下拉選擇選項，我將如何在下拉菜單中填充一個字段。我正在嘗試使用JavaScript作爲int客戶端是唯一的選擇。這不僅僅是試圖弄清楚如何根據這些方面做些事情。任何幫助將非常感激。一個JS小提琴鏈接也將不勝感激，我沒有很多運氣找到這樣的例子。

Answer 1

var data = { 
 
    Honda: { 
 
    car: ["Civic", "Acura"], 
 
    truck: ["Ridgeline"] 
 
    }, 
 
    Toyota: { 
 
    car: ["Camry", "Corolla"], 
 
    truck: ["Some truck"] 
 
    } 
 
} 
 

 
var updateDropDown = function(){ 
 
    var make = $("#make").val() 
 
    var type = $("#type").val() 
 
    var options = data[make][type] 
 
    var html = "" 
 
    options.forEach(function(option){ 
 
    html += '<option value="' + option + '">' + option + '</option>' 
 
    }) 
 
    $("#options").html(html) 
 
} 
 

 
$("#make").change(updateDropDown) 
 
$("#type").change(updateDropDown) 
 
updateDropDown();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<select id="make"> 
 
    <option value="Honda">Honda</option> 
 
    <option value="Toyota">Toyota</option> 
 
</select> 
 
<select id="type"> 
 
    <option value="car">Car</option> 
 
    <option value="truck">Truck</option> 
 
</select> 
 
<select id="options"> 
 
</select>