使用JavaScript填充1-100下拉菜单仅显示100的问题求助

嘿，这个问题我太熟悉了！咱们一步步拆解清楚：

为什么只显示100？ #

核心问题出在循环里的这行代码：

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

你用的是赋值运算符=，这意味着每次循环都会把selectAge的内部HTML完全替换成当前的<option>标签。循环从1跑到100，前99次生成的选项都被下一次覆盖了，最后自然只剩最后一次的<option>100</option>。

另外还有个小细节：document.onload并不是标准的事件写法，应该用window.onload；而且你这里的自执行函数可能会在DOM还没完全加载完成时就运行（虽然这次刚好能拿到selectAge，但写法不够严谨）。

解决方法 #

有两种常用的修复方式，看你偏好哪种：

方法1：用+=追加HTML #

把赋值改成追加运算符，这样每次循环都会把新的option加到已有内容后面：

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

我把selectAge的获取放到了事件回调里，确保DOM加载完成后再获取元素，避免出现找不到元素的报错。

方法2：创建DOM元素并追加（更推荐） #

直接创建<option>元素，用appendChild添加到select中，这种方式性能更好，也更符合DOM操作的最佳实践：

window.addEventListener('DOMContentLoaded', function(){
    var selectAge = document.getElementById("selectAge");
    for(let i = 1; i<=100 ; i++){
        let option = document.createElement('option');
        option.textContent = i;
        // 如果需要给option设置value属性，可以加这行：option.value = i;
        selectAge.appendChild(option);
    }
});

用DOMContentLoaded事件比window.onload更高效，因为它在DOM结构加载完成后就触发，不需要等图片等外部资源加载完毕。

额外小优化（可选） #

如果以后需要生成的选项数量特别多（比如上千个），推荐先把所有option放到文档片段里，再一次性添加到select中，这样能减少DOM重绘次数，提升页面性能：

window.addEventListener('DOMContentLoaded', function(){
    var selectAge = document.getElementById("selectAge");
    let fragment = document.createDocumentFragment();
    for(let i = 1; i<=100 ; i++){
        let option = document.createElement('option');
        option.textContent = i;
        fragment.appendChild(option);
    }
    selectAge.appendChild(fragment);
});

不过100个选项的话，前面两种方法完全够用啦～

内容的提问来源于stack exchange，提问作者Play38