select[multiple]必须加multiple属性才能多选，否则仅切换当前项；JS需用selectedOptions获取全部值，name须与后端参数名一致且不可带方括号。
select[multiple] 必须加 multiple 属性才能多选
不加 multiple 属性，哪怕按住 Ctrl 或 Cmd 点击，也只会切换当前选中项——这是最常被忽略的硬性前提。浏览器只识别这个布尔属性，写成 multiple="true" 是错的，multiple="" 可用但冗余，直接写 multiple 就行。
加了之后，
移动端尤其要注意：iOS Safari 会直接忽略 multiple，降级为单选系统 Picker；Android 表现也不统一。纯移动端场景下，别依赖这个属性。
JS 读取多选值必须用 selectedOptions
select.value 永远只返回第一个选中项的 value，不是全部。常见错误是后端只收到一个值，以为接口有问题，其实是前端取值方式错了。
正确做法是：
- 用
Array.from(select.selectedOptions).map(opt => opt.value)拿字符串数组（IE10+ 支持） - 避免遍历所有
options并手动判断option.selected，容易因动态增删选项导致状态不同步 - 如果用 AJAX 提交，显式传这个数组；别依赖
FormData自动收集——老浏览器对multiple的FormData支持不全
表单提交时 name 命名要匹配后端接收逻辑
name 不是类名，它必须和后端 API 的参数名完全一致。比如后端接收 ?category=phone&brand=apple&brand=samsung，那前端就得写：
-
—— 多个同名value会被自动拼成多个键值对 - 别写
name="brand[]"，这是 PHP 风格，在纯 HTML/JS 场景下FormData不识别方括号，后端收不到数据 - 别把多个条件合并进一个字段再切分（如
name="filters"），否则加个分页或 URL 同步就卡住
提交时，浏览器自动按 brand=apple&brand=samsung 格式发送，后端需按数组/列表类型接收（如 PHP 的 $_POST['brand'] 是数组，Node.js 的 req.body.brand 是字符串或数组，取决于解析中间件）。
前端实时过滤小数据量表格时，注意空值跳过逻辑
当数据 ≤1000 行且已全量加载，可用 JS 实时过滤 tbody 行。关键不是“怎么遍历”，而是“怎么处理空条件”：
- 每个筛选字段（如姓名、部门、状态）的输入值为空时，该条件应被忽略，不能参与
&&判断 - 比对逻辑要写成
!nameVal || nameCell.includes(nameVal)，而不是nameCell.includes(nameVal || '')——后者在空值时会查includes('')，永远为 true - 若列内容来自
data-属性（如data-status），提取时用row.dataset.status，别混用textContent和属性值 - 性能上，避免每次触发都重排 DOM；
tr.style.display = show ? '' : 'none'是轻量操作，够用
真正容易被忽略的是：过滤逻辑里没区分“字段为空”和“字段有值但不匹配”，结果一清空某个输入框，整个表格就消失了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
