时间戳

首页 > 解决方案 > 无法将相同的选项元素添加到多个下拉列表中

javascript - 无法将相同的选项元素添加到多个下拉列表中

问题描述

我在一个页面上有两个下拉菜单。单击按钮时，我需要将一个新选项添加​​到两个下拉列表中（将相同的选项添加到两者中）。选项值存储在一个数组中，我首先创建一个新的选项元素new_option并从数组中设置它的值/文本，然后使用 and 将选项添加到下拉列表dropdown1_name.options.add(new_option)中dropdown2_name.options.add(new_option)。

但在实践中，新选项只添加到我添加它的第二个下拉列表中，而不是第一个，即如果我做 dropdown2.add 后跟 dropdown1.add 那么只有 dropdown1 获得新选项。

通过从头开始创建新选项元素的副本并向每个下拉列表添加一个副本，可以轻松解决此问题。但这对我来说没有意义，所以这个问题的重点是我真的很想首先了解导致这种行为的原因。为什么不能将相同的新创建选项添加到两个下拉列表中？

我刚刚制作的这个小提琴有一个测试设置。

标签： javascripthtmlhtml-select

解决方案

问题是您将相同的<option>实例添加到两个下拉列表中：

dropdown2.options.add(el1);
dropdown1.options.add(el1);
//                    ^^^ notice "el1" twice

相反，您必须el2添加dropdown2：

dropdown2.options.add(el2);
dropdown1.options.add(el1);

我希望这可以帮助你 ：）

推荐阅读