javascript - 将相同的元素附加到不同的元素

Question

我有两个空的选择字段，我想对某个数组进行一次迭代，在每次迭代中创建一个选项元素，并将其附加到两个选择字段。问题是只有最后一个元素获得选项，第一个保持为空:

HTML

<select class="form-control" id="typeCol">
</select>
<br>
<select class="form-control" id="diffCol">
</select>

JavaScript

let typeCol = document.getElementById('typeCol');
let diffCol = document.getElementById('diffCol');
for (let i in cols) {
    let opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = cols[i];
    typeCol.appendChild(opt);
    diffCol.appendChild(opt);
}

添加另一个 for 循环并从那里追加到第二个 select 似乎可行，但仍然 - 发生了什么？

Answer 1

一个元素只能在一个父元素中。如果您在已经有父元素的元素上使用 appendChild，它会从旧父元素移动到新元素。

您可以使用 cloneNode改为创建元素的克隆:

diffCol.appendChild(opt.cloneNode(true));

例子:

let typeCol = document.getElementById('typeCol');
let diffCol = document.getElementById('diffCol');
let cols = ["one", "two", "three"];
for (let i in cols) {
    let opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = cols[i];
    typeCol.appendChild(opt);
    diffCol.appendChild(opt.cloneNode(true));
}

<select class="form-control" id="typeCol">
</select>
<br>
<select class="form-control" id="diffCol">
</select>