cloneNode (true) не копирует дочерние элементы

0

У меня есть следующее:

var divs = document.getElementsByClassName('projectListDiv');
var projectList = getProjects();
/* getProjects() generates a <select> element with multiple <option>s */
for(var i = 0; i < divs.length; i++){
    divs[i].innerHTML = "";
    var listCopy = projectList.cloneNode(true);
    divs[i].appendChild(listCopy);
}

getProjects() возвращает следующее:

<select>
    <option value="test">test</option>
    <option value="Project Test">Stalker Test</option>
</select>

Который теоретически должен добавить элемент <select> для каждого div с классом projectListDiv. Он добавляет элемент <select> но элемент не имеет <options несмотря на то, что у projectList явно есть опции. Я зарегистрировал все для консоли, чтобы проверить, и по какой-то причине, когда я cloneNode(true) я теряю всех дочерних элементов projectList. Мысли?

  • 0
    Вы забыли опубликовать самую важную часть, что getProjects()
  • 0
    @adeneo ... Вы видели / * комментарий * /?
Показать ещё 22 комментария
Теги:

2 ответа

1
Лучший ответ

Я привел пример в http://jsfiddle.net/NSYRH/ с пользовательским getProjects(), который возвращает выбор с параметрами:

function getProjects() {
    var s = document.createElement('select');
    s.appendChild(new Option('a','avalue'));
    s.appendChild(new Option('b','bvalue'));
    s.appendChild(new Option('c','cvalue')); 
    return s;
}

Я не вижу никаких проблем с этим кодом.

Поделиться
  • 0
    Хорошо, я приму это как ответ, хотя я попрошу вас объединить этот ответ с другим. Ничего не помогло, и мне в конечном итоге пришлось дважды вызвать getProjects, что ужасно неэффективно, но это работает, и это небольшая программа, так что я не слишком беспокоюсь об этом.
  • 0
    единственный код, который нужно изменить во втором ответе, - это способ получения данных (xml, string, json string) и создания опции с этими данными.
0

Асинхронный режим с обратным вызовом:

getProjects(function(projectList) {
   var divs = document.getElementsByClassName('projectListDiv');
   /* getProjects() generates a <select> element with multiple <option>s */
   for(var i = 0; i < divs.length; i++){
       divs[i].innerHTML = "";
       var listCopy = projectList.cloneNode(true);
       divs[i].appendChild(listCopy);
   }
})

function getProjects(successCallback) {
  var s = document.createElement('select');
  var xhr = new XMLHttpRequest(); 
  xhr.open('GET', '/something');
  xhr.onload = function() {
     /** use xhr.responseText here to add option to node s */
     /* then call the successCalback) */
     successCallback(s);
  }
  xhr.send();
}
Поделиться
  • 0
    jsfiddle.net/NSYRH/1 вот jsfiddle, который получает данные JSON, добавляет каждую опцию к выбору, а затем заполняет каждый div.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню