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

Question

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

但实际上，新选项只会添加到我添加的第二个下拉列表中，而不是第一个，即如果我先 dropdown2.add 然后 dropdown1.add 然后只有 dropdown1 得到新的选项。

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

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

Answer 1

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

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

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

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

希望对您有所帮助:)

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

Unable to add same option element to more than one dropdown

html

javascript

html-select