Question

我正在处理个人项目，但我无法保存并使用从下拉列表中选择的值。例如：

<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会更快！”并且如果用户选择汽车，则具有相同的功能。将得到2个下拉列表进行比较。

旁注：如果有人有任何关于保存此类比较数据的建议，请致电我。

Answer 1

$('#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>

如何使用JS创建响应式下拉？

1 个答案: