use una matriz de javascript para llenar un cuadro desplegable de selección

Question

Tengo un archivo de texto que estoy leyendo y almacenando los datos en una matriz de javascript, es una lista de cocinas. Quiero usar la matriz para completar un cuadro de selección desplegable. Sé cómo codificar en los valores para el cuadro desplegable (utilizando la opción correcta si estoy equivocado), pero quiero poder utilizar el conjunto para completarlo.

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

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

he codificado un conjunto de simplicidad, el "CuisineList" es mi cuadro desplegable

Answer 1

utilizar un bucle for para iterar a través de su matriz. Para cada cadena, cree un nuevo elemento option, asigne la cadena como innerHTML y value, y luego agréguela al elemento 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

ACTUALIZACIÓN: El uso de createDocumentFragment y forEach

Si usted tiene una lista muy grande de elementos que desea añadir a un documento, puede ser no performant para anexar cada nuevo elemento individualmente El DocumentFragment actúa como un objeto de documento liviano que se puede usar para recolectar elementos. Una vez que todos sus elementos estén listos, puede ejecutar una sola operación appendChild para que el DOM solo se actualice una vez, en lugar de n veces.

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

Ésta es una parte de un servicio REST-he escrito recientemente.

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) 
} 

La razón por la publicación im esto es porque appendChild() había't trabajando en mi caso por lo que decidió poner otra posibilidad que funciona también.