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

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 object并在第一个和第二个选择框中插入选项时，只填充第二个选择框，第一个选择框为空。我得选两个对象。为什么会这样？这不是问题，但我想知道为什么会这样。

最佳答案

如果您选择了box1.options.add（op），您需要知道的是，将op添加到selectBox1 options，然后当您选择box2.options.add（op）时，它将从selectBox1 options中删除op并将其添加到selectBox2 options。

使用op1

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