Question

这是我的代码：

<!doctype html>

<html>
<head>
    <meta charset="utf-8">
    <title>Date Picker</title>
</head>
<body>
<p>Click the button to loop through a block of code five times.</p>
<button onclick="myFunction()">Try it</button>
<select id="demo">
</select>
<p id="demo"></p>
<script>
function myFunction()
{
    var i;
    for (i=1;i<=5;i++){
      document.getElementById("demo").innerHTML="<option value="+i+">"+i+"</option>";
    }
}
</script>
</body>
</html>

我想要的是当我按下按钮下拉框时会生成如下选项：

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>

但我只得到这段代码

<option value="5">5</option>

它只显示选项上的5。请帮忙..谢谢

Answer 1

您在每次迭代中都会覆盖'demo'的内容。最好使用DOM方法向选项添加选项：

function myFunction(selector)
{
    var i;
    for (i=1;i<=5;i++){
      selector.options[i-1] = new Option(i,i);
    }
}
//usage:
myFunction(document.getElementById("demo"));

顺便说一句：检查你的HTML。 id个元素应该是唯一的。使用您的HTML，您的脚本如何知道document.getElementById("demo")的哪个元素？

Answer 2

添加要选择的元素将适合您

var select = document.getElementById("demo");  

var i=0;
 for(i=1;i<=5;i++){  
     select.options[select.options.length] = new Option(i,i);  

}

使用javascript循环选择选项

2 个答案: