正确写法是使用select.selectedoptions获取多选值，它返回所有被选中的option元素；取value用array.from(select.selectedoptions).map(opt => opt.value)，取text则用opt.text。
select multiple 获取选中值的正确写法
直接读 select.value 只会返回第一个选中的值，多选场景下必须遍历 options 或用 selectedOptions——这是最常踩的坑。
推荐优先用 select.selectedOptions，它返回一个 HTMLCollection，包含所有当前被选中的 <option></option> 元素，兼容性好（IE9+），语义清晰，不用手动判断 selected 属性。
-
select.selectedOptions是只读属性，返回的是实时集合，无需过滤 - 想取 value 值：用
Array.from(select.selectedOptions).map(opt => opt.value) - 想取文本内容：把
opt.value换成opt.text - 注意：不能用
select.options直接 .map()，因为它是类数组但不是 Array
为什么不要用 for...in 遍历 options
for...in 会遍历原型链上的属性（比如 length、item），导致意外结果；而 for...of 或 Array.from() 才安全。
错误示例：
for (let key in select.options) { console.log(select.options[key].value) } // 可能报错或输出 undefined
- 正确遍历方式：用
for (const opt of select.selectedOptions) - 或者转成数组后处理：
[...select.selectedOptions].forEach(opt => {...}) - 如果必须兼容老 IE（select.options 并检查
opt.selected
监听 multiple select 的变化事件
别用 change 事件监听单个点击——用户按 Ctrl/Cmd 多选时，change 只在失焦时触发；应该用 input 事件，它在每次选中状态变化时立即触发（Chrome/Firefox/Edge 支持，Safari 15.4+）。
select.addEventListener('input', () => { /* 这里取 selectedOptions */ })- 如果需兼容 Safari 旧版，仍用
change，但提醒用户“需点空白处确认” - 注意：
input不会冒泡到父元素，如需委托，得绑定在select自身
value 和 text 的常见混淆点
很多人以为 option 的 value 必须和显示文本一致，其实不然：value 是提交/脚本使用的值，text 是用户看到的内容。二者可以完全不同。
- HTML 中：
<option value="user_123">张三</option>→ JS 取opt.value得"user_123"，取opt.text得"张三" - 如果没写
value，浏览器默认用text作为value，但不建议依赖这个行为 - 动态生成 option 时，务必显式设置
value，避免空格、换行等不可见字符污染数据
真正麻烦的不是怎么取值，而是忘记检查 selectedOptions.length === 0 的边界情况——尤其在表单重置或初始加载时，容易漏掉空数组处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
