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

【问题标题】：Unable to add same option element to more than one dropdown无法将相同的选项元素添加到多个下拉列表中
【发布时间】：2020-02-13 01:22:08
【问题描述】：

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

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

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

This fiddle I just made 有一个测试设置。

【问题讨论】：

这可能与深拷贝与浅拷贝有关，请在网上搜索。您可以使用 jquery api.jquery.com/clone 或其他一些方法来生成深拷贝
你必须像“var cloneNode = el1.cloneNode(true);”一样克隆节点，你不能在两个元素上添加相同的实例。

标签： javascript html html-select

【解决方案1】：

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

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

相反，您必须将el2 添加到dropdown2：

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

希望对你有帮助:)

【讨论】：

因为它是同一个实例，所以必须克隆它，然后你可以添加另一个下拉列表。
但是在这种情况下，他已经创建了两个选项实例。这里的问题是他将相同的实例添加到两个下拉列表中，而第二个实例未使用。编辑：对不起，我刚刚意识到他在问为什么他不能添加相同的实例，而不是为什么演示代码不起作用。所以，是的，答案是克隆元素:)