如何使用JS創建響應下拉菜單？

我正在處理個人項目，並且無法保存和使用從下拉列表中選擇的值。例如：如何使用JS創建響應下拉菜單？

<select id = "CarType" onchange = "cartype()"> 
    <option value = "car"> Car </option> 
    <option value = "suv"> SUV </option> 
</select>

所以我試圖創造的功能是，用戶會選擇「SUV」，然後由於該選擇我想填充2個下拉列表上市的SUV車型，所以用戶會選擇SUV A和SUV B，輸出將爲「SUV B會更快！」如果用戶選擇汽車則具有相同的功能。這兩個下拉菜單將作比較。

附註：如果任何人有關於在哪裏保存這種類型的比較數據的功能什麼忠告時，請讓我知道打電話。

來源

2017-08-26 Butters

你需要一些進一步的解釋？ – Axel

@Axel我在下面評論你的解決方案，如果你能告訴我那種情況會很棒！ – Butters

我想幫助你，但我不明白你的意思。最好是做一個[筆]（https://codepen.io/elstermann/pen/OjoWWo）或[小提琴]（https://jsfiddle.net/）與您現有的樣機（HTML，CSS，JS） ...我需要澄清一下你的問題。 – Axel

$('#CarType').on('change', function() { 
 
    // hide all .sub in advance and filter the one to show by changed value 
 
    $('.sub').hide().filter('#' + $(this).val()).show(); 
 
});

.sub { /* hide all .sub in advance */ 
 
    display: none; 
 
}

<select id="CarType"> 
 
    <option value="car"> Car </option> 
 
    <option value="suv"> SUV </option> 
 
</select> 
 

 
<!-- add .sub select boxes --> 
 
<select id="car" class="sub"> 
 
    <option value="car1"> car1 </option> 
 
    <option value="car2"> car2 </option> 
 
</select> 
 

 
<select id="suv" class="sub"> 
 
    <option value="suv1"> suv1 </option> 
 
    <option value="suv2"> suv2 </option> 
 
</select> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

來源

2017-08-26 02:45:46 Axel

絕對完美！幫我做相同的概念的應用。但是我有建立兩個下拉菜單邊問題側面，如選擇SUV之後，我想用戶看到2一邊到另一邊的下拉菜單既包含越野車1和SUV 2.顯然，這是同一個概念，但我有麻煩了一些道理。我想格的風格和對齊，沒有得到預期的結果。 – Butters

如何使用JS創建響應下拉菜單？

回答

相關問題