Загрузите два выпадающих с одинаковыми значениями

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

Нет, это не работает. Рефакторинг кода для создания узла опции в функцию.

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 2

Чтобы добавить его ко второму элементу, просто клонируйте его.

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

пример на http://www.jsfiddle.net/7Kxdu/

Answer 3

Да, ваши объекты OPTION будут сначала добавлены в dr2, а затем в dr1. При вызове add не будет создаваться копий, но только что созданный объект будет перемещен из нигде в dr2 , затем в dr1 .

Общая идея заключается в том, что вы не можете иметь объект DOM в двух разных местах одновременно. Возможно, вы захотите взглянуть на клонирование объектов JavaScript. Смотрите здесь некоторую полезную информацию: Какой самый эффективный способ глубокого клонирования объекта в JavaScript? .

Если вам просто нужно клонировать объекты элемента DOM, вы можете использовать cloneNode(). Смотрите здесь полный список доступных членов и методов: http://www.w3schools.com/jsref/dom_obj_all.asp