原生 select multiple 无法实现“多选+确认”一体化控件，因其交互为实时选中，按钮形同虚设；正确取值需用 selectedoptions，提交需 name 带[]，移动端兼容差，推荐自定义弹层方案。
原生 HTML 里没有“多选列表 + 确认按钮”这种一体化控件，select multiple 本身不带确认逻辑，必须靠 JS 补足；直接写个带按钮的 select 不会自动联动，用户点了选项还得手动点按钮才能生效。
为什么不能只用 select multiple + 按钮就完事
浏览器对 select multiple 的交互是「实时选中」：用户 Ctrl+Click 或拖选时，selectedOptions 立刻更新，跟按钮无关。加个“确认”按钮纯属 UI 假象——除非你禁用原生交互、接管全部选择行为。
- 不拦截默认行为的话，按钮点击前用户早已完成选择，按钮形同虚设
- 如果想让按钮真正控制“提交哪些项”，就得监听
change事件并阻止默认，改用自定义状态管理 -
size属性决定显示几行，设成1时 Chrome 显示单行带滚动箭头，Firefox 可能直接缩成一行无提示，用户根本看不出可多选
select multiple 的正确初始化和取值方式
别用 value 读多选结果，它永远只返回第一个选中项的 value 字符串；也别遍历 options 手动判断 .selected，容易漏掉动态插入的 option。
- 用
select.selectedOptions获取所有当前选中的<option></option>元素集合 - 转成数组再取
value：Array.from(select.selectedOptions).map(opt => opt.value) - 表单提交时，
name="fruits[]"（带[]）才能让后端收到数组，否则只收最后一个
移动端必须绕开 select multiple
iOS Safari 对 select multiple 直接降级为单选，Android 各厂商浏览器支持度参差不齐——长按可能触发多选但无视觉反馈，用户不知道成功与否。
- 真要“确认式多选”，桌面端可用
select+ JS 封装，移动端必须换方案 - 推荐结构：
<div class="tag-input"> <button data-value="a">A</button><button data-value="b">B</button> </div>+ 下拉弹层（div+checkbox） - 确认按钮只控制弹层显隐，选中状态存在 JS 数组里，点击标签可删除，比原生控件可控得多
最易被忽略的是语义与行为错位：用户看到“确认按钮”就预期“点之前没生效”，但 select multiple 天然违背这点。要么彻底放弃原生，要么把按钮改成“应用筛选”之类明确提示实时生效的文案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
