单选下拉框安全读取value需确保每个option显式设置value属性、在change或submit事件中读取、未选时返回""；多选必须用Array.from(select.selectedOptions).map(opt => opt.value)获取字符串数组，禁用select.value。
document.getElementById('mySelect').value 能直接拿到单选下拉框的选中值，但多选、没设 value、事件绑定时机不对，这行代码就立刻失效——不是 JS 有问题，是用法踩了原生 select 的几个硬限制。
单选下拉框怎么安全读 value
核心就一条：确保每个 option 都显式写了 value 属性。
-
<option value="shanghai">上海</option>✅ 安全；<option>上海</option>❌ 不稳定，空格/换行会干扰解析 - 读取时机优先选
change事件，别在click或mousedown里读——那时 DOM 还没更新 - 表单提交前校验，一定要在
submit事件里重新读value，别依赖之前缓存的变量（用户可能改完没触发change就点了提交） -
value未选中时返回空字符串""，不是null或undefined，做判断时注意用=== ""而非== null
多选下拉框为什么 value 总是错的
select.value 对 multiple 下拉框完全不可靠——它只返回第一个选中项的 value 字符串，其余全部丢弃。必须绕开这个属性。
- 加
multiple属性是前提：<select multiple>，不能写multiple="true"，也不能拼错成mutiple - 正确读法：
Array.from(select.selectedOptions).map(opt => opt.value)，得到的是字符串数组 -
selectedOptions是实时 HTMLCollection，不用手动遍历options判断selected状态，更简洁也更可靠 - iOS Safari 基本不支持原生
multiple，长按无反馈、无法连续选择，移动端建议换自定义复选组件
表单提交时后端收不到字段？先查 name 属性
JS 里用 id 找元素没问题，但表单提交、FormData 构造、后端接收，全靠 name 属性——id 在这里完全不参与数据流转。
立即学习“前端免费学习笔记（深入）”；
-
<select id="city" name="city"></select>✅ 提交后键名是city；<select id="city"></select>❌ 后端收不到这个字段 - 用
FormData时：new FormData(formEl)会自动收集所有带name的控件，包括multiple下拉框的全部选中值（作为多个同名键） - 如果后端期望数组但只收到一个字符串，检查是否误用了
select.value而不是遍历selectedOptions—— 原生提交本身是对的，问题常出在 JS 中间层手动拼参数时
需要显示文本而不是 value 怎么办
极少数场景（比如日志记录、调试展示）要的是用户看到的文字，而不是提交用的 value。这时候别去 innerHTML 解析或正则匹配，有现成 API。
- 单选：用
select.options[select.selectedIndex].text或select.selectedOptions[0]?.text - 多选：遍历
selectedOptions，取每个opt.text，和取value的写法只差一个属性名 - 注意
text包含前后空格和换行，如需干净显示，得自己.trim() - 不要用
innerText或textContent替代text，它们行为不一致（比如隐藏选项也会被读到）
最易被忽略的一点：原生 select[multiple] 的样式控制能力几乎为零，哪怕加了 size，在不同浏览器里高度、滚动条、聚焦态都不可控。真要“下拉式多选”或统一视觉，得放弃原生方案，用 div + checkbox + JS 模拟——这不是过度设计，是现实约束。
