JavaScript中获取multiple select全部选中值需用selectedOptions而非value属性，推荐Array.from(select.selectedOptions).map(opt => opt.value)；注意IE11兼容性、受控组件写法及空值防护。
JavaScript 读取 select[multiple] 的选中值
浏览器原生 select 元素开启 multiple 属性后，用户可按住 Ctrl（macOS 是 Cmd）多选，但 value 属性只返回第一个选中项——这是最常踩的坑。必须通过 selectedOptions 或遍历 options 判断 selected 状态来获取全部。
推荐用法：
const select = document.querySelector('select[name="tags"]');
const values = Array.from(select.selectedOptions).map(opt => opt.value);
注意点：
-
select.value永远只返回首个选中项，哪怕有十个被选中 -
select.selectedOptions是HTMLCollection，需转成数组才能用map、filter - IE11 不支持
selectedOptions，如需兼容，改用for (let i = 0; i
提交表单时后端如何接收多选数据
浏览器默认将多选 select 提交为多个同名字段，例如：tags=js&tags=html&tags=css。后端框架是否自动合并成数组，取决于具体实现和参数命名方式。
立即学习“前端免费学习笔记（深入）”；
常见情况：
- PHP：直接用
$_POST['tags']得到数组（前提是 HTML 中name="tags[]"） - Node.js（Express +
body-parser）：需确保name含方括号，如name="tags[]"，否则只取最后一个值 - Django：表单字段定义为
MultipleChoiceField，且前端name不带[]（Django 自动处理） - Spring Boot：用
@RequestParam List<String> tags接收，name保持为tags即可，无需方括号
关键：前后端对“同名多值”的约定必须一致，name 写法不是纯前端事。
用 FormData 手动收集多选值时的陷阱
调用 new FormData(form) 会正确包含所有选中项，但若手动 append，容易漏掉逻辑。
错误写法：
formData.append('tags', select.value); // 只加了第一个
正确做法：
- 让
FormData自动采集：new FormData(form)（推荐） - 手动采集时遍历：
for (const opt of select.selectedOptions) formData.append('tags', opt.value); - 避免用
set()，它会覆盖已有同名项；必须用append()
调试技巧：打印 Array.from(formData.entries()) 查看实际键值对，确认是否有多条 tags。
React 中受控组件的多选状态管理
React 的 select[multiple] 必须用数组作为 value，且 onChange 事件里要显式更新整个数组——不能只 push 或 splice，否则视图不同步。
典型写法：
const [selectedTags, setSelectedTags] = useState([]);<br><br>const handleChange = (e) => {<br> setSelectedTags(Array.from(e.target.selectedOptions, opt => opt.value));<br>};
易错点：
- 把
value设为字符串（如value={selectedTags[0]}），会导致非受控警告 - 在
onChange里只修改数组局部（如selectedTags.push(...)），不触发重渲染 - 选项
value是数字时，注意类型：后端可能期望字符串，而opt.value总是字符串，需手动转
真实项目里，选项经常来自异步加载，selectedOptions 在首次渲染时可能为空，别忘了加空值防护。
