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

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

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

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

У меня есть жестко закодированный массив для простоты, "CuisineList" - это мое раскрывающееся окно

Ответы

Ответ 1

Используйте цикл 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

ОБНОВЛЕНИЕ: Использование createDocumentFragment и 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

Ответ 2

Это часть службы REST, которую я недавно написал.

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() не работал в моем случае, поэтому я решил поставить еще одну возможность, которая работает также.