JavaScript - remplir la liste déroulante avec un tableau

Question

J'ai un tableau déclaré dans un script :

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

J'ai un formulaire qui contient un menu déroulant :

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

En utilisant Javascript, comment vais-je remplir le reste du menu déroulant avec les valeurs du tableau ? Pour que les options soient "Choisissez un nombre", "1", "2", "3", "4", "5" . . . . . "N" ?

Answer 1

Vous devrez parcourir les éléments de votre tableau, créer un nouveau nœud DOM pour chacun et l'ajouter à votre objet.

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

Exemple en direct

Answer 2

Vous pouvez également le faire avec jQuery :

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

Answer 3

J'ai trouvé que ça marche aussi...

 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 4

Vous obtiendrez d'abord l'élément déroulant du DOM, puis parcourrez le tableau et ajouterez chaque élément en tant que nouvelle option dans la liste déroulante comme ceci :

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

Voir JSFiddle pour une démo en direct : http://jsfiddle.net/nExgJ/

Cela suppose que vous n'utilisez pas JQuery et que vous n'avez que l'API DOM de base avec laquelle travailler.