Question

在2个不同的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上。

Answer 1

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

一般的想法是你不能同时在两个不同的地方拥有一个DOM对象。您可能想要了解JavaScript对象克隆。请参阅此处获取一些有用的信息：What is the most efficient way to deep clone an object in JavaScript?。

如果您只需要克隆DOM元素对象，则可以使用cloneNode()。请参阅此处以获取可用成员和方法的完整列表：http://www.w3schools.com/jsref/dom_obj_all.asp

Answer 2

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

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

Answer 3

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

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

示例http://www.jsfiddle.net/7Kxdu/

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

3 个答案: