最安全的动态添加下拉选项方法是 select.add()，支持IE9+及现代浏览器，能正确维护选中状态、事件绑定和插入顺序；避免使用 innerHTML +=，因其会清空状态并丢失事件。
用 select.add() 最安全，兼容 IE9+
现代浏览器和旧版 IE 都支持 select.add() 方法，它能正确处理 DOM 插入顺序、选中状态和事件绑定，比直接拼接 HTML 字符串更可靠。
-
select.add(new Option("文本", "值"))是最常用写法，自动创建<option>并插入末尾 - 第二个参数（value）可省略，此时 value 默认等于文本内容
- 如果要插到指定位置，传第三个参数：例如
select.add(option, select.options[2])表示插在第 3 个选项前 - IE8 及更早版本不支持该方法，需降级用
appendChild()（但当前基本无需考虑）
用 innerHTML += 很危险，慎用
看似简单，实际会清空整个下拉框的已选状态、移除所有绑定事件、重置 selectedIndex，且在某些浏览器中触发两次渲染。
- 即使只加一项，
select.innerHTML += "<option value='x'>y</option>"也会重写全部<option>节点 - 用户正在选择时可能突然“跳回第一个选项”，造成体验断裂
- 若原
<select>有onchange或通过addEventListener绑定的监听器，全部丢失
动态加选项前，先确认 select 元素已存在
常见错误是 JS 执行时机太早，DOM 还没加载完，导致 document.getElementById("mySelect") 返回 null。
- 确保脚本放在
</body>前，或包装在DOMContentLoaded事件里 - 不要依赖
window.onload，它等图片等资源加载完才触发，太晚 - 检查控制台是否报错
Cannot read property 'add' of null—— 这就是元素没拿到
document.addEventListener('DOMContentLoaded', function() {
const sel = document.getElementById('mySelect');
if (sel) {
sel.add(new Option('上海', 'shanghai'));
sel.add(new Option('北京', 'beijing'));
}
});
需要清空再加？用 select.length = 0 比 innerHTML = "" 更轻量
清空下拉框是高频操作，但方式影响性能和状态保持。
立即学习“前端免费学习笔记（深入）”；
-
select.length = 0直接清空所有<option>，保留原<select>元素的所有属性和事件绑定 -
select.innerHTML = ""会销毁并重建所有子节点，丢失onchange等内联事件，且触发重排 - 如果用了
addEventListener，清空后无需重新绑定；但用innerHTML就得再绑一次
data-loaded="true" 标记或用 Set 缓存已加载的 value，比事后清理更省事。 
