如何将相同的“选项”元素添加到两个不同的“选择”列表？

Question

我有一个小的 JS 示例，尝试将相同的option元素添加到两个不同的select列表，但似乎每当我尝试这样做时，唯一option的元素就会添加到两个列表中的第二个，我不确定为什么。

HTML：

<select id='one'></select>

<select id='two'></select>

<input type='button' value='click' onclick='ftn();' />

JavaScript：

function ftn() {

    var one = document.getElementById("one");

    var two = document.getElementById("two");

    var option = document.createElement("option");

    option.value = "cool";

    option.innerText = "beans";

    one.appendChild(option);

    two.appendChild(option);

};

结果：

option我可以实现使该元素的内容同时存在于两个列表中的预期结果select，但这需要我创建两个不同的option元素，并且使它们的数据相同。

有没有一种方法可以在 Javascript 中仅使用一个选项元素来完成此任务？

另外，这是我为此编写的 CodePen 的链接：CodePen

Answer 1

你不能。一个元素只能有一个父元素，因此要将同一option元素添加到两个不同的select列表中，必须复制option.MDN文档是appendChild这样说的：Node.appendChild() 方法将一个节点添加到指定父节点的子节点列表的末尾。如果给定的子节点是对文档中现有节点的引用，appendChild() 会将其从当前位置移动到新位置（不需要在将节点追加到其他节点之前从其父节点中删除该节点）。这意味着一个节点不能同时位于文档的两个点中。因此，如果该节点已经有父节点，则首先删除该节点，然后将其追加到新位置。Node.cloneNode() 方法可用于在将节点附加到新父节点之前创建节点的副本。请注意，使用cloneNode 制作的副本不会自动保持同步。因此，您的代码将附加option到第一个select，然后将其移动到第二个。您可以克隆option将其放入两个select元素中。