Заполнить HTML ‹select› массивом Javascript

Я пытаюсь заполнить поле выбора HTML из массива JavaScript, однако, когда я запускаю свою страницу, моя консоль выводит следующее:

Uncaught TypeError: Cannot read property 'appendChild' of null at hello.html:113

Однако, поскольку он создан с помощью JavaScript innerHTML, я не могу его выбрать. Есть ли другой способ выбрать это?

var police_api_dates = ["&date=2017-03",];
var info = L.control();
info.onAdd = function (mymap) {
    this._div = L.DomUtil.create('div', 'info');
    this.update();
    return this._div;
};

info.update = function (properties) {
    this._div.innerHTML = '<select id="parent"></select><h4>Highlighted Postcode</h4>' +  (properties ?
        '<b> Postcode: ' + properties.Name
        : 'Hover over a state');
};
var parent = document.getElementById("parent");
for ( var pos = 0; pos < police_api_dates.length; pos++)
{
    //create an <option> to add the <select>
    var child = document.createElement("option");

    //assign values to the <option>
    child.textContent = police_api_dates[pos]
    child.value = pos;

    //attach the mew <option> to the <selection>
    parent.appendChild(child);
}


info.addTo(mymap);

javascript arrays html leaflet
person Adam    schedule 21.01.2018    source источник
comment
var parent = document.getElementById("parent"); оценивается только один раз, когда JS выполняет эту строку. Позже, в info.update(), вы заменяете этот элемент новым элементом (даже если он имеет тот же идентификатор, это другой элемент).   -  person connexo    schedule 21.01.2018
comment
Можно ли предложить исправление, как вы указали, я до сих пор не вижу, где я ошибаюсь.   -  person Adam    schedule 21.01.2018
comment
Просто удалите строку var parent = document.getElementById("parent"); и все готово. Это восстанавливает поведение браузера по умолчанию, когда элементы с идентификатором становятся доступными по их идентификатору без необходимости объявлять переменную и использовать document.getElementById.   -  person connexo    schedule 21.01.2018
comment
Я удалил var parent = document.getElementById(parent); и parent.appendChild (дочерний);   -  person Adam    schedule 21.01.2018
comment
Однако теперь моя проблема заключается в том, что поле выбора выглядит пустым, а не отображает то, что находится в массиве.   -  person Adam    schedule 21.01.2018
comment
parent.appendChild(child); нельзя удалять.   -  person connexo    schedule 21.01.2018
comment
Uncaught TypeError: parent.appendChild не является функцией   -  person Adam    schedule 21.01.2018
comment
Нужно убедиться, что в момент выполнения parent.appendChild(child); в DOM есть элемент с id=parent.   -  person connexo    schedule 21.01.2018
comment
this._div.innerHTML = '‹select id=parent›‹/select› не создается ли это в этой строке?   -  person Adam    schedule 21.01.2018
comment
Это внутри функции и выполняется только при вызове функции.   -  person connexo    schedule 21.01.2018
comment
Этот код имеет много проблем. Аргументы передаются и не используются, parent создается в функции, которая вызывается только после ссылки на нее, но функция также уничтожает все дочерние элементы, добавленные к родителю... список слишком длинный. Я бы (честно!) предложил вам начать с нуля.   -  person trincot    schedule 21.01.2018
comment
Возможный дубликат использует массив javascript для заполнить раскрывающееся поле выбора   -  person Heretic Monkey    schedule 21.01.2018
comment
Я предполагаю, что ваш сценарий находится в заголовке вашего html-файла, поэтому всякий раз, когда обрабатывается код определения parent и последующего цикла for, <select> еще не существует. Я бы предложил обернуть эту часть кода в функцию, которая вызывается, как только страница полностью загружается. Вы можете сделать это, например, с помощью document.addEventListener.   -  person rolfv1    schedule 21.01.2018
comment
Я новичок в javascript, поэтому я не совсем в курсе, но если бы кто-нибудь мог помочь мне настроить код соответствующим образом, я был бы очень признателен, чтобы я мог учиться на своих ошибках.   -  person Adam    schedule 21.01.2018
comment
Также следует отметить, что мой HTML пуст и не имеет идентификатора из-за того, что я хочу сделать это через javascript.   -  person Adam    schedule 21.01.2018
comment
@Adam добавил тег листовки. Вы получите ответ, более подходящий для вашей проблемы   -  person zer00ne    schedule 21.01.2018

Ответы (1)


arrow_upward
0
arrow_downward

Используйте этот метод...

var police_api_dates = ["&date=2017-03",];

var info = L.control();


info.onAdd = function (mymap) {
    this._div = L.DomUtil.create('div', 'info');
    this.update();
    return this._div;
};


var S='';


for(var i=0; i<police_api_dates.length; i++){

  S=S+'<option value="'+i+'">'+police_api_dates[i]+'</option>';

}



info.update = function (properties) {

 info.innerHTML='<select id="parent">'+S+'</select>'+'<h4>Highlighted Postcode</h4>' + (properties ? '<b> Postcode: ' + properties.Name : 'Hover over a state');
};


parent.innerHTML=S; // Insert the options

parent.selectedIndex=3; // Set your default value


info.addTo(mymap);

NB: я бы не стал использовать имена переменных/идентификаторов, такие как «дочерний» и «родительский», потому что вы настраиваете себя на конфликты зарезервированных слов javascript.

Обновленный код, чтобы привести вашу последовательность в порядок... посмотрим, что из этого выйдет.

person user4723924    schedule 21.01.2018
comment
Возникли проблемы с внедрением этого в мой код, я заменил свой код, но поля по-прежнему отображаются пустыми. - person Adam; 21.01.2018
comment
Не могли бы вы использовать P вместо родительского и, возможно, C вместо дочернего для переменных/идентификаторов? - person user4723924; 21.01.2018
comment
Я сделал, однако я немного потерял, это все еще не работает. - person Adam; 21.01.2018
comment
Попробуйте это... трудно помочь вам на расстоянии. :) - person user4723924; 21.01.2018
comment
jsfiddle.net/uteey91y/4 Это обновлено с использованием вашего кода, так как вы не видите информации. поле появляется в верхней части. - person Adam; 21.01.2018
comment
Изменил его снова... попробуй следовать логике, чтобы ты мог исправить это, потому что отсюда у меня нет полной картины. - person user4723924; 21.01.2018
comment
Мне нужно поле выбора над полем состояния наведения, однако теперь весь информационный элемент исчез. по сравнению с тем, как это должно выглядеть здесь jsfiddle.net/e1syoc68 - person Adam; 21.01.2018
comment
Что не так с именами parent и child? Они не зарезервированы и, безусловно, более читабельны, чем P и C. S тоже не слишком дружелюбен. - person AuxTaco; 21.01.2018
comment
Никогда не объединяйте произвольные данные в контекст HTML без их надлежащего экранирования. Лучше устанавливать вещи по свойствам. - person Brad; 22.01.2018