动态添加option需创建新节点并检查value唯一性，避免复用、重复和xss；ios需focus/blur刷新渲染；联动显示应重算全部已选项而非仅新增项。
点击按钮时用 JavaScript 动态添加 option 到 <select multiple></select>
直接往 <select multiple></select> 里追加 option 元素即可，但必须确保每次新增都创建新节点，不能复用已有 option 元素——否则会从原位置移走，造成“选项消失”假象。
常见错误现象：select 选项没增加、旧选项被覆盖、新增后无法多选、控制台报 Failed to execute 'appendChild' on 'Node'。
- 用
document.createElement('option')创建新节点，设好value和textContent，再调用selectElement.appendChild(option) - 别用
innerHTML += '<option value="x">y</option>'——这会销毁已绑定的事件监听器，且易引入 XSS（尤其当 value 或 text 来自用户输入） - 如果按钮要支持“添加相同值的不同选项”，
value必须唯一（比如加时间戳后缀：value="item_1629384756"），否则浏览器可能去重或行为异常 - 移动端 Safari 对
multiple的原生渲染是全屏选择器，新增选项后无需额外适配，但用户看不到实时列表变化——这是浏览器限制，不是代码问题
select.multiple 下如何避免重复添加相同 value 的选项
用户反复点“添加”按钮时，很容易塞进重复 value 的 option，导致表单提交多个相同 ID，后端校验失败。
正确做法不是靠 UI 提示“已存在”，而是从 DOM 层面拦截：遍历 select.options 检查 value 是否已存在，不存在才插入。
- 用
Array.from(select.options).some(opt => opt.value === newValue)判断是否已存在 - 别用
select.querySelector(`[value="${newValue}"]`)——若newValue含单引号或双引号，会导致语法错误 - 如果数据来自用户输入框（如文本框填“北京”再点添加），务必对
value做基础清洗：去首尾空格、替换不可见字符（\u200b等） - 注意：即使
value相同，textContent不同也应视为不同选项（比如“北京-朝阳”和“北京-海淀”），所以判断逻辑只看value，不比text
新增选项后，怎样让已选中的项保持高亮（尤其在 iOS 上）
iOS Safari 对 <select multiple></select> 的视觉反馈极弱：新增 option 后，之前选中的项可能不显示勾选标记，但实际仍被选中——这是渲染延迟+滚动锚点错位造成的，不是 JS 逻辑问题。
解决的关键不是重绘，而是触发一次“重置焦点”：
- 新增完所有
option后，调用select.focus()，再立即select.blur()，强制刷新渲染状态 - 如果用户已选中若干项，新增后想保持它们可见，可调用
select.scrollIntoView({ block: 'nearest' })，但别用behavior: 'smooth'（iOS 不支持） - 绝对不要在新增后手动设置
select.value = ...——multiple下value只返回第一个选中项，会破坏多选状态 - 验证是否真选中：用
Array.from(select.selectedOptions).map(opt => opt.value)，而不是select.value
按钮添加选项时，怎样同步更新关联的显示区域
多选下拉菜单常需联动显示对应内容（比如选中“周一”就显示周一的输入框），而用户可能先选了“周二”，再点按钮加了“周三”，这时“周三”的区域必须立刻显示，且“周二”的不能隐藏。
核心逻辑是“叠加式显示”，不是“覆盖式切换”：
- 给每个待显元素设唯一 ID（如
id="day-mon"），其value与option的value严格一致 - 每次按钮点击后，先清空所有关联区域的
display样式（或统一加hidden类），再遍历select.selectedOptions，对每个opt.value找到对应元素并设display: block - 别在按钮点击时只处理“刚加的那一个”，必须重算全部已选项——因为用户可能手动勾选了别的项
- 性能提示：如果关联元素超过 50 个，用
DocumentFragment批量操作 DOM，避免频繁重排
option 节点虽在 DOM 中，却尚未被浏览器纳入 focusable 流——得等下一个事件循环。所以，如果业务强依赖键盘操作，要在 appendChild 后加 setTimeout(() => select.focus(), 0)。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
