javascript - 基于javascript中的另一个下拉菜单创建一个新的下拉菜单

Question

这是我的要求。

项目清单

1. 我有几个下拉列表 A 和 B
2. 我创建了一个 javascript 键值变量：

3. var keyvalue={"key1":["value1","value2"],"key2":["value2","value4"]}

4. 我正在填充下拉列表 A 中的键，在选择此下拉列表时，我将相应的值（来自 keyvalue 变量）填充到下拉列表 B

这是示例代码 ia 使用：

问题是即使我在下拉列表 A 中选择了不同的选项，相应的旧选项也会出现在新的下拉列表中，即附加新值，而不是创建新的下拉列表任何帮助表示赞赏，在此先感谢。

Answer 1

您需要在填充之前删除所有选项。var quantity在您的声明之后直接添加此内容。

while (selectvalue.options.length > 0) {
    selectvalue.remove();
}

---

此外，正如@francisco-presencia 所提到的，您应该onchange在 HTML 中丢失 ，而是在脚本中使用事件侦听器。

Answer 2

我建议你走关注点分离路线。这意味着删除onclick=""事件，而是执行：

$('#key').change(function(){
  $('#value').remove();
  // Do the rest of the logic of retrievevalue() here.
  });

Answer 3

在添加新选项之前，您应该使用empty()删除旧选项。

你可以在我的 Fiddle 示例中看到它：

JS小提琴在这里

$('#select2').empty().append(Weapons);