javascript - 使用 javascript 填充从 1 到 100 的下拉菜单

Question

我尝试编写一个 javascript 代码，用从 1 到 100 的选项标签填充选择标签。

但它没有给我 99 个选项，而是只给我一个带有 100 值的选项。

我很乐意了解并知道如何解决这个问题。

var selectAge = document.getElementById("selectAge");
document.onload = (function(){
  for(let i = 1; i<=100 ; i++)
    selectAge.innerHTML ="<option>" + i + "</option>";
})();

<form>
  <label>
    Your age:
    <select name="age" id="selectAge"></select>
  </label>
</form>

Answer 1

您将在循环的每次迭代中覆盖 innerHTML。
一种解决方案是与 addition assignment operator 连接: +=。

var selectAge = document.getElementById("selectAge");
for (let i = 1; i <= 100; i++)
  selectAge.innerHTML += "<option>" + i + "</option>";

<select name="age" id="selectAge"></select>

---

正如 Ivan 所提到的，为了避免重写 innerHTML 100 次，我建议先构建一个字符串:

var selectAge = document.getElementById("selectAge");
var contents;

for (let i = 1; i <= 100; i++) {
  contents += "<option>" + i + "</option>";
}

selectAge.innerHTML = contents;

<select name="age" id="selectAge"></select>