select.value最快但仅适用于单选且option有value属性；多选必须用selectedoptions；读值时机应监听change而非click；判断未选需用selectedindex===-1而非value空字符串。
直接用 select.value 最快，但只适用于单选且 option 有 value 属性
绝大多数场景下，你不需要遍历 options 或监听 change 事件再取值——select 元素本身就有 value 属性，浏览器会自动同步当前选中项的 value（或 text，当没设 value 时）。
常见错误现象：select.value 返回空字符串，其实是因为对应 option 没写 value 属性，浏览器退而取其文本内容；但如果文本含空格或换行，取到的值就不可靠。
- 确保每个
option显式声明value，比如<option value="user">普通用户</option> - 多选
select[multiple]不能用.value，它只返回第一个选中项（或空字符串），必须用selectedOptions - 动态插入的
option要等 dom 更新后再读.value，否则可能还是旧值
select.selectedOptions 是多选和兼容性兜底的正确姿势
当你处理多选框、或需要同时拿到值和文本、或要兼容老版本 edge（selectedOptions 在 IE 中不支持），就得绕过 .value，直接操作选中的节点集合。
使用场景：权限批量勾选、标签多选、需要校验选中项是否禁用（option.disabled）等。
立即学习“前端免费学习笔记（深入）”；
-
select.selectedOptions返回的是htmlCollection，可直接用for...of遍历 - 每个
option的.value和.text都可安全读取，不受空白字符影响 - IE11 不支持
selectedOptions，需降级用select.options配合.selected判断（但现代项目通常不用管 IE）
示例：
const selected = Array.from(select.selectedOptions).map(opt => opt.value);别在 click 里读 select.value，时机错了
用户点选项时，click 事件触发早于选中状态更新，此时 select.value 还是上一个值。这是最常踩的坑，尤其配合自定义下拉菜单或点击 option 做联动时。
性能影响：强行在 click 里加 setTimeout 等状态更新，既不可靠又拖慢响应。
- 一律改用
change事件——它只在选中真正变化后触发 - 如果必须响应点击（比如阻止默认行为），那就去监听
option的click，然后手动调用select.dispatchEvent(new Event('change')) - React/Vue 等框架中，优先用绑定的
v-model或onChange，它们内部已处理好时机
option[value] 为空字符串时，select.value 仍可能非空
当某个 option 的 value=""，而它恰好被选中，select.value 就是空字符串——这本身没错。但容易误判为“没选”或“非法值”，尤其后端要求非空校验时。
兼容性影响：所有浏览器都这样处理，不是 bug，是规范行为。
- 判断是否真未选，应该用
select.selectedIndex === -1，而不是检查.value - 若业务上
value=""代表“全部”或“不限”，就在后端或 API 层明确约定，前端别把它当异常 - 避免把空字符串
value和缺失value属性混用，前者可控，后者依赖渲染时的文本内容
实际开发里，select.value 和 selectedOptions 并不是二选一的关系，而是按需组合：单选 + 有 value → 直接读 .value；多选 / 需文本 / 需属性判断 → 上 .selectedOptions；任何涉及时机的逻辑 → 只信 change。