我已經在腳本中聲明數組：的JavaScript - 填充下拉列表與數組
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」？
你會通過你的數組元素需要循環，創建一個新的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);
}
我有一個錯誤'的textContent和值不是function'和解決方案是** **投選擇爲String這樣的： 'el.textContent =字符串（OPT）; 報。value = String（opt）;' 這是在** opt **的情況下不是_ ** String ** _。 – 2018-01-08 10:30:57
@AbdallahOkasha這沒有意義。如果您嘗試像這樣使用'el.textContent'，那麼會發生錯誤：'el.textContent（opt）'。如果你像在我的例子中那樣使用它，不管它是否是一個「數字」，瀏覽器都會將它變成一個字符串。 – 2018-01-08 16:29:49
感謝關心..實際上，我試着寫'el.textContent = arr [i]'或'el.value = arr [i]'並且出現錯誤：** _ value_，_text_和_textContent_不是功能**。 – 2018-01-09 10:27:51
像這樣的東西應該工作：
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
["1","2","3","4"].forEach(function(item) {
var o = document.createElement("option");
o.textContext = item;
document.getElementById("myselect").appendChild(o);
});
這隻適用於兼容HTML5的瀏覽器！ – 2012-03-27 18:21:55
你會首先得到下拉元素從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可以使用。
請注意，我遇到這個問題時，我複製粘貼此代碼：http://stackoverflow.com/questions/4404526/unexpected-token-illegal-in-webkit – 2013-04-11 19:42:22
@NielsBrinch - 不要直接複製和粘貼來自JSFiddle。 :) – DashK 2013-04-11 22:28:46
我實際上是從Stackovervflow複製粘貼的，而不是小提琴 - 但也許是從他自己的小提琴中複製粘貼的stackoverflow作者和複製粘貼進行了！ :) – 2013-04-12 08:11:39
<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>
你也可以做到這一點使用jQuery：
var options = ["1", "2", "3", "4", "5"];
$('#select').empty();
$.each(options, function(i, p) {
$('#select').append($('<option></option>').val(p).html(p));
});
在這個問題中沒有jQuery標籤。 – 2015-12-20 02:20:32
我認爲這是不需要投票的，可能會幫助某人。 jQuery是一個JavaScript框架，並提出了JavaScript的問題。像這樣的行爲會激發人們的貢獻。 – 2015-12-21 08:31:10
請參閱http://meta.stackexchange.com/questions/45176/when-is-use-jquery-not-a-valid-answer-to-a-javascript-question – 2015-12-21 19:19:06
我發現這也是工程...
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>";
}
我有同樣的要求，我用 「亞歷克斯·圖爾平」 解決方案如下所述進行小的更正。
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版本。所以改正它工作正常。
亞歷克斯感謝您的解決方案。
的一些注意事項，請發表您的嘗試和任何錯誤消息（S）你得到。謝謝。 – bernie 2012-03-27 18:11:37