Question

我在Javascript中有一个充满<option>元素的数组。我使用以下代码循环遍历此数组：

array.forEach(e => {
  selectElement1.appendChild(e);
  selectElement2.appendChild(e);
});

这导致只填充forEach循环中的最后一个selectElement。

如何填充两个选择元素？

Answer 1

将具有父节点的节点附加到另一个节点，将节点移动到新父节点。要解决此问题，您可以clone节点。

var dupNode = node.cloneNode([deep]);

注意：由于您希望克隆文本（克隆节点的子节点），请将深度克隆选项设置为true。

＆＃13;

var array = [1, 2, 3];

array.forEach(e => {
  var el = document.createElement('option');
  el.textContent = e;
  
  var el2 = el.cloneNode(true); // cloning with the deep option

  selectElement1.appendChild(el);
  selectElement2.appendChild(el2);
});

＆＃13;

<select id="selectElement1"></select>
<select id="selectElement2"></select>

＆＃13;

Answer 2

我有点迟了，但已经有了答案，希望有所帮助。

根据文档，appendChild()方法。

将节点添加到指定父级子级列表的末尾   节点。如果该节点已存在，则将其从当前父节点中删除   节点，然后添加到新的父节点。

这意味着节点不能位于文档的两个点中   同时。因此，如果节点已经有父节点，则该节点是第一个节点   删除，然后附加在新位置。 Node.cloneNode()可以   用于在将节点附加到新节点之前制作节点的副本   父节点。

＆＃13;

const selects = {
  one: document.getElementById('select1'),
  two: document.getElementById('select2')
};

const OptionFactory = {
  create(text, value) {
    return new Option(text, value);
  }
};

const {
  create
} = OptionFactory;

const options = [create('Option 1', 1), create('Option 2', 2)];

const addOption = (select, option) => {
  select.add(option);
};

options.forEach(option => {
  const clonedOption = option.cloneNode(true);
  addOption(selects.one, option);
  addOption(selects.two, clonedOption);
});

＆＃13;

<select id="select1"></select>
<select id="select2"></select>

＆＃13;

在javascript中填充2个选择元素会清除第一个元素

2 个答案: