option元素必须作为select的直接子元素；应使用select.add()或createElement添加，避免innerHTML+=导致重绘、选中丢失、XSS等风险；需校验value去重、手动设value触发选中、focus/blur刷新iOS渲染，并单独处理禁用和事件。
option 元素不能独立存在，必须作为 select 的直接子元素；动态设置时，绕过它直接操作 options 集合或创建新节点，比拼接字符串更安全、可控。
为什么不能用 innerHTML += ''
这种写法会强制重绘整个 select，导致已选中的值丢失、事件监听器被清除、iOS 上焦点状态异常。更隐蔽的问题是：当 value 或 text 含单引号、双引号、 等字符时，极易引发 HTML 解析错误或 XSS 漏洞。
- 用
select.add(new Option(text, value))最简洁，兼容到 IE9+ - 需要设
disabled、data-id等属性时，改用document.createElement('option')+ 属性赋值 - 插入到开头？传第二个参数：
select.add(opt, select.options[0])
如何避免重复添加相同 value 的选项
用户连点“添加”按钮时，value 相同的 option 会被浏览器静默合并或行为不一致（尤其在 Safari 中）。这不是 UI 层面提示能解决的，得从 DOM 层拦截。
- 判断是否存在：
Array.from(select.options).some(opt => opt.value === newValue) - 别用
select.querySelector(`[value="${newValue}"]`)—— 若newValue含引号，JS 字符串会提前截断 - 若显示文本不同但 value 相同（如“北京-朝阳” vs “北京-海淀”），仍应允许添加，只校验
value
动态添加后默认选中和 iOS 渲染刷新
selected 属性只在初始加载时生效；运行时设置必须操作 select.value 或 select.selectedIndex。而 iOS Safari 对 select[multiple] 的渲染延迟严重——新增选项后，已选中的项可能不显示勾选标记，但实际值仍在 select.selectedOptions 中。
立即学习“前端免费学习笔记（深入）”；
- 设默认选中：
select.value = "xxx"（比selectedIndex更可靠，不受插入顺序影响） - iOS 刷新视觉：添加完所有
option后立即执行select.focus(); select.blur(); - 清空全部选项优先用
select.length = 0，比循环remove()或innerHTML = ""更轻量且不触发重排
真正容易被忽略的是：动态添加的 option 不会自动继承父级 select 的 disabled 状态，也不带任何事件监听器——每加一个，都得单独处理是否禁用、是否绑定点击反馈、是否参与表单验证逻辑。
