JavaScript - poblar la lista desplegable con arreglo

Question

He declarado una matriz en una secuencia de comandos:

var myArray = new Array("1", "2", "3", "4", "5" . . . . . "N"); 

Tengo un formulario que contiene un menú desplegable:

<form id="myForm"> 
    <select id="selectNumber"> 
    <option>Choose a number</option> 
    </select> 
</form> 

uso de JavaScript, ¿cómo ¿Rellenaré el resto del menú desplegable con los valores de la matriz? De modo que las opciones serán "Elija un número", "1", "2", "3", "4", "5". . . . . "NORTE"?

Answer 1

Tendrá que recorrer los elementos de la matriz, crear un nuevo nodo DOM para cada uno y anexarlo a su objeto.

var select = document.getElementById("selectNumber"); 
var options = ["1", "2", "3", "4", "5"]; 

for(var i = 0; i < options.length; i++) { 
    var opt = options[i]; 
    var el = document.createElement("option"); 
    el.textContent = opt; 
    el.value = opt; 
    select.appendChild(el); 
}​ 

Live example

Answer 2

Algo como esto debería funcionar:

var dropdown = document.getElementById("dropdown1"); 
if (dropdown) { 
    for (var i=0; i < month.length;++i){  
     addOption(dropdown, month[i], month[i]); 
    } 
} 

addOption = function(selectbox, text, value) { 
    var optn = document.createElement("OPTION"); 
    optn.text = text; 
    optn.value = value; 
    selectbox.options.add(optn); 
} 

puede hacer referencia a este artículo para más detalles:
http://www.plus2net.com/javascript_tutorial/list-adding.php

Answer 3

["1","2","3","4"].forEach(function(item) { 
    var o = document.createElement("option"); 
    o.textContext = item; 
    document.getElementById("myselect").appendChild(o); 
}); 

Answer 4

Usted primero consigue el elem desplegable ento de la DOM, a continuación, recorrer la matriz, y añadir cada elemento como una nueva opción en el menú desplegable de la siguiente manera:

// Get dropdown element from DOM 
var dropdown = document.getElementById("selectNumber"); 

// Loop through the array 
for (var i = 0; i < myArray.length; ++i) { 
    // Append the element to the end of Array list 
    dropdown[dropdown.length] = new Option(myArray[i], myArray[i]); 
}​ 

Ver jsFiddle para una demostración en vivo: http://jsfiddle.net/nExgJ/

Esto supone que eres no usa JQuery, y usted solo tiene la API de DOM básica para trabajar.

Answer 5

<form id="myForm"> 
<select id="selectNumber"> 
    <option>Choose a number</option> 
    <script> 
     var myArray = new Array("1", "2", "3", "4", "5" . . . . . "N"); 
     for(i=0; i<myArray.length; i++) { 
      document.write('<option value="' + myArray[i] +'">' + myArray[i] + '</option>'); 
     } 
    </script> 
</select> 
</form> 

Answer 6

También puede hacerlo con jQuery:

var options = ["1", "2", "3", "4", "5"]; 
$('#select').empty(); 
$.each(options, function(i, p) { 
    $('#select').append($('<option></option>').val(p).html(p)); 
}); 

Answer 7

me encontré con esto también funciona ...

var select = document.getElementById("selectNumber"); 
var options = ["1", "2", "3", "4", "5"]; 

// Optional: Clear all existing options first: 
select.innerHTML = ""; 
// Populate list with options: 
for(var i = 0; i < options.length; i++) { 
    var opt = options[i]; 
    select.innerHTML += "<option value=\"" + opt + "\">" + opt + "</option>"; 
} 

Answer 8

que tenían el mismo requisito, solía solución "Alex Turpin" con pequeñas correcciones como se menciona a continuación.

var select = document.getElementById("selectNumber"); 
var options = ["1", "2", "3", "4", "5"]; 

for(var i = 0; i < options.length; i++) { 
    var opt = options[i]; 
    var el = document.createElement("option"); 

el.text = opt; 
    el.value = opt; 
    select.add(el); 

}​ 

correcciones porque con la función appendChild() es cargas cuando el DOM prepara. Por lo tanto, no funciona en versiones antiguas (8 o menos) de IE. Entonces con las correcciones funciona bien.

Gracias Alex por su solución.

Algunas notas sobre differences b/w add() and appendChild()