根据javascript中的另一个下拉菜单创建一个新的下拉菜单

Question

这是我的要求。

列出项目

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

3. var keyvalue = {“key1”：[“value1”，“value2”]，“key2”：[“value2”，“value4”]}

4. 我在下拉列表A中填充了键，在选择此下拉列表时，我将相应的值（从键值变量中取出）填入下拉列表B

以下是使用的示例代码：

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

Answer 1

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

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

---

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

Answer 2

我建议你去separation of concerns route。这意味着删除onclick=""事件，而是执行：

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

Answer 3

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

你可以在我的样本小提琴上看到它：

JS Fiddle Here

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