JavaScript: popola l’elenco a discesa con l’array

Ho un array dichiarato in uno script:

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

Ho un modulo che contiene un menu a discesa:

 
Choose a number

Usando Javascript, come posso popolare 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”?

Dovrai scorrere gli elementi dell’array, creare un nuovo nodo DOM per ciascuno e aggiungerlo al tuo object.

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

Esempio dal vivo

Puoi farlo anche con jQuery:

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

Qualcosa di simile 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); } 

Puoi fare riferimento a questo articolo per maggiori dettagli:
http://www.plus2net.com/javascript_tutorial/list-adding.php

Per prima cosa otterrai l’elemento a discesa dal DOM, quindi esegui il ciclo attraverso la matrice e aggiungi ogni elemento come una nuova opzione nel menu a discesa come segue:

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

Vedi JSFiddle per una demo dal vivo: http://jsfiddle.net/nExgJ/

Questo presuppone che tu non stia usando JQuery e hai solo l'API DOM di base con cui lavorare.

Ho trovato che 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 += ""; } 

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 () si caricano quando il DOM si prepara. Quindi non funziona con versioni precedenti (8 o meno) di IE. Quindi con le correzioni sta funzionando bene.

Grazie Alex per la tua soluzione.

Alcune note sulle differenze b / w add () e appendChild ()

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