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));

示例：

＆＃13;
＆＃13;
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)); }
＆＃13;
<select class="form-control" id="typeCol"> </select> <br> <select class="form-control" id="diffCol"> </select>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您不能追加相同的元素，但是您可以使用cloneNode()方法创建克隆然后附加它。

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

Answer 3

//For this you can use template tag of HTML 5 :- 

<select class="form-control" id="typeCol">
  <template id="typeColTemplate">
   <option id="" value=""></option>
  </template>
</select>

<br>

<select class="form-control" id="diffCol">
  <template id="diffColTemplate">
   <option id="" value=""></option>
  </template>
</select>


//In JS:-

for (let i in cols){
var count =1;
var content = document.querySelector("#typeColTemplate").content;
var content = document.querySelector("#typeDiffTemplate").content;
var option = content.querySelector("option[id]");
option.id="opID" + count;
option.value=i;
option.innerHTML=i;
document.querySelector('#typeCol').appendChild(document.importNode(content, true));
document.querySelector('#diffCol').appendChild(document.importNode(content, true));
count++;
}

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

3 个答案: