используйте массив JavaScript, чтобы заполнить выпадающий список выбора

У меня есть текстовый файл, который я читаю и храню данные в массиве javascript, это список кухонь. Я хочу использовать массив, чтобы заполнить выпадающий список выбора. Я знаю, как жестко запрограммировать значения в раскрывающемся списке (используя «исправить меня, если я не прав»), но я хочу иметь возможность использовать массив для его заполнения.

<script type="text/javascript">
var cuisines = ["Chinese","Indian"];            
</script>

<select id="CusineList"></select>

Я жестко закодировал массив для простоты, "CuisineList" мой выпадающий список

 astro boy29 июн. 2012 г., 04:09
возможный дубликат:stackoverflow.com/questions/6601028/…
 davidgoli29 июн. 2012 г., 04:10
Если вы читаете этот текстовый файл на сервере, вы, вероятно, захотите сгенерировать массив, используя PHP или любой другой язык сервера, который вы используете.

Ответы на вопрос(2)

Решение Вопроса

for цикл для перебора вашего массива. Для каждой строки создайте новыйoption элемент, назначьте строку какinnerHTML а такжеvalue, а затем добавить его кselect элемент.

var cuisines = ["Chinese","Indian"];     
var sel = document.getElementById('CuisineList');
for(var i = 0; i < cuisines.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = cuisines[i];
    opt.value = cuisines[i];
    sel.appendChild(opt);
}

DEMO

UPDATE: Using createDocumentFragment and forEach

Если у вас есть очень большой список элементов, которые вы хотите добавить в документ, может быть неэффективным добавлять каждый новый элемент по отдельности.DocumentFragment действует как легкий объект документа, который может использоваться для сбора элементов. Как только все ваши элементы готовы, вы можете выполнить одинappendChild операция, так что DOM обновляется только один раз, вместоn раз.

var cuisines = ["Chinese","Indian"];     

var sel = document.getElementById('CuisineList');
var fragment = document.createDocumentFragment();

cuisines.forEach(function(cuisine, index) {
    var opt = document.createElement('option');
    opt.innerHTML = cuisine;
    opt.value = cuisine;
    fragment.appendChild(opt);
});

sel.appendChild(fragment);

DEMO

 14 авг. 2017 г., 08:37
Есть ли способ остановить элемент выбора, отображаемый пустым в течение доли секунды до добавления параметров?
 11 июл. 2017 г., 10:34
Это написано как "CusineList" в оригинальном вопросе
 17 окт. 2018 г., 18:17
Не удалось заставить работать ни одно из 2 решений (независимо от браузера) .appendChild (opt) выдает ошибку!

var select = $("#productSelect")
for (var prop in data) {
    var option = document.createElement('option');
    option.innerHTML = data[prop].ProduktName
    option.value = data[prop].ProduktName;
    select.append(option)
}

Причина, по которой я публикую это, заключается в том, что appendChild () не работает в моем случае, поэтому я решил добавить еще одну возможность, которая работает также.

 18 июл. 2018 г., 03:33
это также предполагает, что jQuery используется для использования JavaScriptdocument.getElementById("productSelect")
 26 окт. 2017 г., 23:38
Как добавить опцию, например & quot; Выбор & quot; как первый вариант?

Ваш ответ на вопрос