JavaScriptを - 私は、スクリプト内で宣言された配列を持つ配列

Question

でドロップダウンリストを移入：

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

私は、ドロップダウンメニューを含むフォームがあります。JavaScriptを使用して

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

を、どのようになります残りのドロップダウンメニューに配列の値を入力しますか？オプションは「数字を選択」、「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); 
}​ 

Live example

Answer 2

：

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 3

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

Answer 4

をドロップダウン要素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 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

あなたはまた、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

私は、これはまた、作品見つけ...

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

私は "アレックスターピン" ソリューションを使用し、同じ要件を持っていました以下に述べるように小さな訂正で。

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

}​ 

訂正をDOMが準備するときのappendChild（）関数でロードしているため。したがって、これは古い（8以下の）IEバージョンでは機能しません。だから訂正すればうまくいきます。

ありがとうございました。

いくつかのノートについてdifferences b/w add() and appendChild()