JavaScript - aumento di popolazione a discesa con l'allineamento

Question

Ho una matrice dichiarata in uno script:

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

Ho una forma che contiene un menu a discesa:

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

Utilizzando Javascript, come sarà Compro il resto del menu a discesa con i valori dell'array? In modo che le opzioni siano "Scegli un numero", "1", "2", "3", "4", "5". . . . . "N"?

Answer 1

È necessario scorrere gli elementi dell'array, creare un nuovo nodo DOM per ciascuno e aggiungerlo al proprio oggetto.

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

Qualcosa del genere dovrebbe funzionare:

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

è possibile fare riferimento a questo articolo per ulteriori dettagli:
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

Per prima cosa ottenete il dropdown elem ent dal DOM, quindi scorrere l'array, e aggiungere ogni elemento come una nuova opzione nel menu a discesa in questo modo:

// 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]); 
}​ 

Vedere JSFiddle per una dimostrazione dal vivo: http://jsfiddle.net/nExgJ/

questo presuppone che sei non usare JQuery e hai solo l'API DOM di base con cui lavorare.

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

si può anche fare 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

Ho trovato questo funziona anche ...

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

Ho avuto lo stesso requisito, ho usato la soluzione "Alex Turpin" con piccole correzioni come indicato di seguito.

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

}​ 

correzioni perché con la funzione appendChild() è carica quando il DOM prepara. Quindi non funziona con versioni precedenti (8 o meno) di IE. Quindi con le correzioni sta funzionando bene.

Grazie Alex per la soluzione.

Alcune note sul differences b/w add() and appendChild()