如何正確填充JavaScript中的下拉列表？

我想填充我的下拉列表中，我已經通過手動輸入每個變量到數組中，但我想能夠使用循環添加數組。如何正確填充JavaScript中的下拉列表？

對不起，我新的JavaScript

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

var select = document.getElementById("selectNumber"); 
var options = new Array(51); 
var firstyear = (new Date().getFullYear()) - 17; 
var temp = 0; 

for (var i = 0; i < 51; i++) { 
    temp = firstyear - 1; 
    options.push(temp); 

    alert(temp); 
} 
alert (options); 

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

來源

2013-08-28 user2430661

這不是Java;它是JavaScript。他們是完全不同的語言。 –

對不起意思javascript – user2430661

你可以使用Jquery。 newSelect.append（$（'

我認爲這應該工作：

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

<script> 
var select = document.getElementById("selectNumber"); 
var options = new Array(); 
var firstyear = (new Date().getFullYear()) - 17; 
var temp = firstyear; 

for(var i = 0; i < 51; i++) { 
    options.push(temp); 
    temp--; 
    } 

for(var i = 0; i < options.length; i++) { 
    var opt = options[i]; 
    var el = document.createElement("option"); 
    el.text = opt; 
    el.value = opt; 
    select.appendChild(el); 
} 
</script>

來源

2013-08-28 03:52:00 JLewkovich

謝謝你的工作，我也是這麼想的 – user2430661

不過要注意，根據瀏覽器的速度，你可能會遇到一些競爭條件，其中'select'是未定義的 –

你應該設置'el。 text「，而不是」el.textContent「，因爲text屬性反映了文本屬性，而不是* textContent *。並且有許多瀏覽器在使用中沒有實現* textContent *，但它們都實現了* text *屬性。 – RobG

你是相當接近，但你缺少「）」字符。

您有：

for(var i = 0; i < 51; i++ {

它應該是：

for(var i = 0; i < 51; i++) {

要注意：調試輸出循環往往是最好的做用警報的console.log代替。它會在任何瀏覽器上顯示Javascript控制檯，但要注意將它們留在後面，因爲如果它們留在那裏並且控制檯目前未打開，它將會破壞IE8（甚至可能是9+）？

來源

2013-08-28 03:50:04

有幾個小錯誤，在你的代碼：

你的JavaScript代碼的頁面上創建的元素之前運行，因此是調用時未定義。您需要將您的代碼放入一個函數中，該函數將在文檔完全創建後調用。
如果您使用var options = new Array(51);初始化陣列，然後使用options.push(...)，那麼您將有50個空值，然後是您添加的值。您需要將初始化改變var options = new Array();
您在for(var i = 0; i < 51; i++ {
忘了)您需要更改temp = firstyear - 1;到temp = firstyear - i;否則你將填補你的陣列的50倍相同的值
一環足以實現這一點

這是您的鱈魚的更新版本e修正了這些問題：

document.ready = function() { 
    var select = document.getElementById("selectNumber"); 
    var options = new Array(); 
    var firstyear = (new Date().getFullYear()) - 17; 

    for (var i = 0; i < 50; i++) { 
     var date = firstyear - i; 
     var el = document.createElement("option"); 
     el.textContent = date; 
     el.value = date; 
     select.appendChild(el); 
    } 
}

來源

2013-08-28 03:56:32

如何正確填充JavaScript中的下拉列表？

回答

相關問題