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

Question

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

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

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

Я жёстко массив для простоты «CuisineList» мой раскрывающийся список

Answer 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

UPDATE: Использование 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

Answer 2

Это часть из REST-службы I've написал недавно.

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