在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），您需要知道的是，当您执行 selectBox2.options.add（op）它将从selectBox1选项中删除它并将其添加到selectBox2选项。

使用 op1

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

Answer 2

为什么会这样？

我觉得这是因为 pass by reference 概念。

请考虑这一行

var op=new Option()

将创建对option对象的引用，上面的行将等同于

var op=document.createElement('option')

  

所以这里发生的事情是reference创建object   reference一次只能分配给element个adding。那   这就是removal的{​​{1}}和option正在发生的原因   如果您在reference中看到select，则会DOM   透视，只会创建一个option元素，它可以   仅分配给select元素。事实coding language或。{   html紧随其后。

<强>结论

您必须像现在一样创建一个新的reference，例如op，op1，或者您可以直接使用以下行，而无需创建option的任何额外代码为其分配text和value等，

selectBox1.options.add(new Option(headers[k],headers[k]));
selectBox2.options.add(new Option(headers[k],headers[k]));

示例 DEMO

希望这对我的解释有意义和参考 - Source 他们在哪里声明：

  

在使用新对象之前，必须将它们显式添加到对象中   各自的馆藏或文件。