最稳方法是用 select.add() 或 options.add()，避免 innerHTML；它不重置选中项、不丢失事件监听，支持 IE9+，可指定插入位置，安全性高且防 XSS。
直接用 select.add() 或 options.add() 最稳，别碰 innerHTML —— 否则已选值、事件监听、移动端渲染全会出问题。
怎么安全地添加一个新选项（不丢状态）
浏览器原生支持 select.add()，它不会清空已有选中项，也不破坏已绑定的事件。比 appendChild() 更语义化，比 innerHTML += 安全得多。
- 用
new Option(text, value)创建：简洁、兼容 IE9+，value可省略（默认同text） - 调用
select.add(option)追加到末尾；加第二个参数可插到指定位置，比如select.add(opt, select.options[0])插到开头 - 如果要设禁用或自定义属性，改用
document.createElement('option')，再设opt.value、opt.textContent、opt.disabled = true等
为什么不能用 innerHTML += '<option>xxx</option>'
看似简单，但实际会触发整个 select 重渲染：已选中的项会被重置为第一个 option，所有 JS 绑定的 change 事件监听器丢失，iOS 上甚至可能卡住不响应。
- 更隐蔽的问题：若原
select里有selected属性，innerHTML赋值后这个状态不会自动同步到select.value - 若内容来自用户输入，没做转义就拼进
innerHTML，极易触发 XSS（比如 value 包含"或'） - 清空再填？也别用
innerHTML = ''，改用select.length = 0，更快更干净
多选下拉框（multiple）添加时要注意什么
select[multiple] 行为和单选基本一致，但有两个关键细节容易被忽略：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 每次新增必须创建全新
option元素，不能复用旧的——否则它会从原来位置“搬家”，造成视觉上“消失” - iOS Safari 渲染延迟明显：新增后已选中的项可能不显示勾选标记，但实际仍被选中；解决办法是紧跟着调用
select.focus()再select.blur() - 防止重复添加：用
Array.from(select.options).some(opt => opt.value === newValue)判断，别用querySelector拼字符串，防注入也防引号报错
动态添加后，如何确保默认选中项生效
很多人加完选项就直接写 select.value = 'xxx'，但若该 value 对应的 option 还没插入 DOM，这行代码就静默失败。
- 务必在
add()或appendChild()完成后再设置select.value - 如果要选中刚加的那项，优先用
select.selectedIndex = select.options.length - 1，比靠value更可靠（尤其 value 含空格或特殊字符时） - 注意：设置
select.value不会触发change事件，如需通知监听器，得手动select.dispatchEvent(new Event('change'))
最常被跳过的一步是：没检查目标 select 元素是否已挂载到 DOM。如果脚本执行时 getElementById 返回 null，后续所有操作都静默失效——加个 if (!select) return 能省掉一半调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
