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

【问题标题】：Fill a dropdown menu from 1 to 100 using javascript使用 javascript 填充从 1 到 100 的下拉菜单
【发布时间】：2018-11-03 00:13:24
【问题描述】：

我尝试编写一个 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>

【问题讨论】：

标签： javascript html for-loop

【解决方案1】：

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

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

&lt;select name="age" id="selectAge"&gt;&lt;/select&gt;

正如Ivan所说，为了避免将innerHTML重写100次，我建议先构建一个字符串：

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

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

selectAge.innerHTML = contents;

&lt;select name="age" id="selectAge"&gt;&lt;/select&gt;

【讨论】：

【解决方案2】：

除了（正如其他人已经指出的那样）您使用 = 而不是 += 进行连接，操作 100 倍 DOM 是一个坏主意，
改为仅使用 innerHTML一次：

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

document.querySelector("[name=age]").innerHTML = ageOptions;

Your age: &lt;select name="age"&gt;&lt;/select&gt;

此外，为了确保 DOM 已解析并准备好进行操作，（而不是 window.onload 和类似的）只需将您的 <script> 标记放在结束 </body> 标记之前。

【讨论】：

【解决方案3】：

尝试添加+=。

这将添加从 0 到 100 的每一个选项，因为+= 表示该值将添加到先前存在的值中。

selectAge.innerHTML +="<option>" + i + "</option>";

【讨论】：

【解决方案4】：

您将为每个循环分配新值给selectAge.innerHTML，但您实际上希望每个循环都为现有循环添加新值。你可以用+= 来做到这一点，女巫与selectAge.innerHTML = selectAge.innerHTML + ... 相同。

【讨论】：

【解决方案5】：

实际上，您必须在循环的每个时期都联系innerHTML 的更改，请参见以下代码：

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

我上面的代码是ES6风格写的，现在流行浏览器很常见。

【讨论】：

【解决方案6】：

您正在覆盖 innerHTML。

var selectAge = document.getElementById("selectAge");
// use addEventlistener or you will overwrite other 'onload' events
window.addEventListener('load', () => {
  for(let i = 1; i<=100 ; i++){
    let option = document.createElement('option');
        option.innerText = i;
    selectAge.appendChild( option );
  }
}); // end onload

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

【讨论】：

呃为什么讨厌？
我不知道你为什么得到 3 票反对！！你的答案是真的，你只是没有写代码，只是它！他们不能投票给你
感谢您提供的附加方法：创建元素并将它们附加到 DOM。