时间戳

首页 > 解决方案 > 如何将相同的“选项”元素添加到两个不同的“选择”列表中？

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

问题描述

我有一个小的 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

标签： javascript

解决方案

你不能。一个元素只能有一个父元素，因此要将相同option元素添加到两个不同select的列表中，您必须复制option.

MDN 上appendChild的文档是这样说的：

Node.appendChild() 方法将一个节点添加到指定父节点的子节点列表的末尾。如果给定的子节点是对文档中现有节点的引用，则 appendChild() 将其从当前位置移动到新位置（不需要在将节点附加到其他节点之前将其从其父节点中删除）。
这意味着一个节点不能同时位于文档的两个点。因此，如果节点已经有父节点，则首先删除该节点，然后将其附加到新位置。Node.cloneNode() 方法可用于在将节点附加到新父节点之前制作节点的副本。请注意，使用 cloneNode 制作的副本不会自动保持同步。

因此，您的代码将附加option到第一个select，然后将其移动到第二个。您可以克隆option以将其放入两个select元素中。

推荐阅读