Question

我正在尝试通过手动将每个变量输入数组来填充我的下拉列表，但是我希望能够使用循环添加数组。

抱歉，我是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 );
}

Answer 1

我认为这应该有效：

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

Answer 2

你很亲密，但你错过了一个“）”角色。

你有：

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

应该是：

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

要注意：循环的调试输出通常最好使用console.log而不是alert。它会在任何浏览器上显示Javascript控制台，但要小心将它们放在后面，因为如果它们留在那里并且控制台当前没有打开它会破坏IE8（甚至可能超过9个？）

Answer 3

您的代码中有几个小错误：

您的javascript代码在页面上创建元素之前运行，因此document.getElementById("selectNumber");在调用时未定义。您需要将代码放在一个函数中，该函数将在文档完全创建后调用。
如果您使用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倍填充数组
一个循环足以实现此目的

以下是修复了这些问题的代码的更新版本：

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

如何在JavaScript中正确填充下拉列表？

3 个答案: