Javascript 加载两个具有相同值的下拉列表

在两个不同的HTML表单下拉列表中加载同一组值是否有问题？我的代码如下所示：

var dr1=document.getElementById("dr1");
var dr2=document.getElementById("dr2");
for (nombre in elements) {
    var opcion=document.createElement('OPTION');
    var cam=elements[nombre];
    opcion.value=nombre;
    opcion.text=cam["nombreCompleto"];
    //Añadimos a los 2 dropdowns
    dr2.add(opcion, null);
    dr1.add(opcion, null);
    }
dr1.selectedIndex=0;
dr2.selectedIndex=0;

这会将同一组值加载到两个不同的下拉列表中。然而，当执行时，它只加载代码中最后出现的任何下拉列表；在上面的示例中，它应该是“dr1”（如果我最后放上“dr2.add（option.null）”行，它将加载该行）。如果我只加载一个下拉列表（注释掉另一个），它工作正常

---

所有这些都在Firefox 3.6.10上。

是的，您的选项对象将首先添加到dr2，然后添加到dr1。调用add时不会创建副本，但您刚刚创建的对象将从无处移动到dr2，然后移动到dr1

一般的想法是，不能同时在两个不同的位置拥有DOM对象。您可能希望了解JavaScript对象克隆。有关一些有用的信息，请参见此处：

---

如果只需要克隆DOM元素对象，可以使用

cloneNode（）

。有关可用成员和方法的完整列表，请参见此处：

不，它不起作用。重构代码，将选项节点创建为函数

function createOption(...) {
    var opcion=document.createElement('OPTION');
    var cam=elements[nombre];
    opcion.value=nombre;
    opcion.text=cam["nombreCompleto"];
    return opcion;
}

dr1.add(createOption(), null);
dr2.add(createOption(), null);

---

要将其添加到第二个元素，只需克隆它即可

dr2.add(opcion, null);
dr1.add(opcion.cloneNode(true), null);

举例