javascript - 将javascript中的多个选择框动态添加到DOM

Question

selectBox1 = document.createElement("select");
selectBox2 = document.createElement("select");
selectBox1.setAttribute("id","select1");
selectBox2.setAttribute("id","select2");

tr = document.createElement('tr');
for(var k = 1; k<headers.length; k++){
 var op = new Option();
 var op1 = new Option();
 op.value = op1.value= headers[k];
 op.text = op1.text =  headers[k];
 selectBox1.options.add(op);
 selectBox2.options.add(op);      
  th = document.createElement('th');
  th.appendChild(document.createTextNode(headers[k]));

  tr.appendChild(th);

}
document.getElementById("table").appendChild(selectBox1);
document.getElementById("table").appendChild(selectBox2);

当我使用 op 对象并在第一个和第二个选择框中插入选项时，只有第二个选择框被填充，而第一个是空的。我必须选择两个选项对象。为什么会这样？这不是问题，但我想了解为什么会这样。

Answer 1

如果您selectBox1.options.add(op) 您将向 selectBox1 选项添加 op 然后当您执行 selectBox2.options.add(op) 时您需要了解的内容> 它将把它从 selectBox1 选项中删除并添加到 selectBox2 选项中。

使用那个op1

selectBox1.options.add(op1);
selectBox2.options.add(op);