带有条件数据 JS 的下拉列表

【问题标题】：Drop-Down Lists with Conditional Data JS带有条件数据 JS 的下拉列表
【发布时间】：2019-05-30 08:37:32
【问题描述】：

我有一个网站，我想包含 2 个下拉框。第二个下拉框中的值取决于第一个。

例如，如果选择了下拉列表 1 中的选项 A，则下拉框 2 中的可用选项将是 1,2,3

如果选择了选项 2，那么下拉框 2 将显示 5、6、7。

我尝试使用 JavaScript 接收第一个框的结果作为参数，然后使用“if 语句”来选择 drop box 2 应使用的答案数组，但这无济于事

'''我没有任何合理的代码可以显示'''

根据我的尝试，我可以收到第一个下拉框选项的索引，但是我无法让第二个框显示该选项的数组

【问题讨论】：

标签： javascript html forms drop-down-menu html-select

【解决方案1】：

<html>
<body>
<script type="text/javascript" src="jquery.min.js"></script>
<select id="ddl1">
<option selected value="1">A</option>
<option value="2">B</option>
</select>
<select id="ddl2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>

<script>
$("#ddl1").change(function(){
$('#ddl2 option').remove();
if($("#ddl1 option:selected").val()==1){
    $('#ddl2').append('<option value="1">1</option>');
    $('#ddl2').append('<option value="2">2</option>');
    $('#ddl2').append('<option value="3">3</option>');
    }
else if($("#ddl1 option:selected").val()==2){
    $('#ddl2').append('<option value="5">5</option>');
    $('#ddl2').append('<option value="6">6</option>');
    $('#ddl2').append('<option value="7">7</option>');
    }
});
</script>
</html>

【讨论】：