直接读取option.selected属性是最可靠方式，它反映当前DOM实际选中状态；selectedOptions兼容性有限（IE不支持）；select.value对多选无效，应遍历options并检查selected属性。
如何判断 <select multiple> 中哪些 <option> 被用户选中
直接读取 option.selected 属性是最可靠的方式，它反映当前 DOM 实际选中状态，不受框架或初始渲染干扰。
-
selected是只读布尔属性，返回true表示该<option>当前被选中（无论是否为初始状态） - 不要依赖
option.hasAttribute('selected')—— 它只检测 HTML 中是否写了selected属性，和运行时状态无关 - 遍历所有
<option>时，用select.options[i].selected比select.selectedOptions更兼容（IE 不支持后者） - 若需获取所有选中项的值：
Array.from(select.options).filter(opt => opt.selected).map(opt => opt.value)
select.selectedOptions 的兼容性与使用边界
selectedOptions 是现代浏览器提供的只读集合，方便批量读取，但不能当“默认选中”依据来用。
- Chrome/Firefox/Edge ≥ 12 支持；Safari 从 8 开始支持；IE 完全不支持
- 它只包含当前被用户或脚本主动选中的项，不会包含仅靠 HTML
selected属性设置但后续被取消的项 - 它返回的是
HTMLCollection，不是数组，要转数组得用Array.from()或扩展运算符 - 错误用法：
if (select.selectedOptions.length) {...}在 IE 下会报错，必须先检测是否存在
为什么 select.value 对多选无效
select.value 只在单选 <select> 中有意义；对 multiple 类型，它始终返回第一个选中项的 value，或空字符串（无选中时）——这容易造成逻辑误判。
- 永远不要用
select.value === 'xxx'判断多选中某值是否存在 - 服务端接收多选数据时，通常拿到的是多个同名参数（如
hobby=reading&hobby=cooking），前端也应按数组思维处理 - 若你用 FormData 提交，
new FormData(form).getAll('hobby')才是正确获取全部选中值的方式
框架里判断选中状态的陷阱
React/Vue 等框架接管表单后，DOM 状态可能滞后于响应式数据，直接查 option.selected 可能不准。
立即学习“前端免费学习笔记（深入）”；
- Vue：若用了
v-model绑定数组，应直接读取绑定的数据（如selectedHobbies.includes('swimming')），而非 DOM - React：若用了受控组件（
value+onChange），state 才是唯一真相；查 DOM 可能拿到旧值（尤其在事件处理函数中未及时更新 state 时） - 混合模式（比如部分选项由 JS 动态插入）最容易出问题：插入后必须手动设
option.selected = true，光写selected属性不触发选中
selected 属性，运行时状态靠 option.selected，而框架内状态靠数据本身——三者不等价，混用就会丢状态。** 
