JavaScript - заполнить выпадающий список массивом

Question

У меня есть массив, объявленный в скрипте:

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

У меня есть форма, которая содержит раскрывающееся меню:

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

Используя Javascript, как я буду заполнять остальныевыпадающего меню со значениями массива?Так что варианты будут «Выбрать номер», «1», «2», «3», «4», «5».,,,,"N"?

Answer 1

Вам нужно будет перебрать элементы массива, создать новый узел DOM для каждого и добавить его к своему объекту.

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

Живой пример

Answer 2

Вы также можете сделать это с помощью 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

Сначала вы получите раскрывающийся элемент из DOM, затем выполните цикл по массиву и добавите каждый элемент в качестве нового параметра в раскрывающемся списке следующим образом:

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

См. JSFiddle для живой демонстрации: http://jsfiddle.net/nExgJ/

Это предполагает, что вы не используете JQuery, и у вас есть только базовый DOM API для работы.

Answer 4

Примерно так должно работать:

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

Вы можете обратиться к этой статье для более подробной информации:http://www.plus2net.com/javascript_tutorial/list-adding.php

Answer 5

У меня было такое же требование, я использовал решение "Alex Turpin" с небольшими исправлениями, как указано ниже.

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

}​

Исправления, потому что с appendChild () функция загружается, когда DOM готовится.Так что это не работает в старых (8 или менее) версиях IE.Так что с исправлениями все работает нормально.

Спасибо Алексу за ваше решение.

Несколько замечаний по различиям ч / б add () и appendChild ()

Answer 6

Я нашел, что это также работает ...

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 7

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

Answer 8

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