如何使用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创建响应下拉菜单？

回答

相关问题