select 必须嵌入 td/th 内且具备 name 和有效 option 才能正常交互和提交；脱离表格单元格、未置于 form 内、name 不合法或动态生成时未同步 DOM 均会导致失效。
select 标签不能直接塞进 table 的结构里就自动生效——它得嵌在 td 或 th 里，且必须配 name 和有效 option，否则点不动、提交不了、JS 也读不到值。
下拉菜单放进 td 里为什么没反应？
常见错误是把 select 写在 table 标签外，或放在 tr 里却没包进 td。浏览器只渲染合法表格单元格内的内容，select 若脱离 td / th 上下文，可能被忽略、错位，甚至被解析为表格外部的孤立元素。
- 正确位置：
<tr><td><select name="status"><option value="pending">待处理</option></select></td></tr> - 错误写法：
<tr><select>...</select></tr>（select不是tr的合法子元素） - 如果用了 CSS
display: contents或visibility: hidden包裹td，select也会失焦或无法交互
select 在表格里提交时字段丢失怎么办？
表格本身不参与表单逻辑，select 能否提交，只取决于它是否在 form 内、是否有 name、且未被禁用。很多人以为“只要在页面上就行”，结果后端收不到字段。
- 必须确保
select在<form>开始和结束标签之间，哪怕form包着整个table -
name属性不可为空、不能含空格或特殊字符（如user[role]在 PHP 中可工作，但在 Express 默认解析器里需额外配置） - 若表格行是动态生成的（比如 JS 拼接
innerHTML），要确认select的name值唯一或带索引（如status[0]、status[1]），否则多行提交会覆盖
多行 select 怎么用 JS 批量读取选中值？
不能靠 document.querySelector('select').value —— 那只会拿到第一行的值。每行 select 是独立控件，得逐个取值，尤其要注意多选场景。
立即学习“前端免费学习笔记（深入）”；
- 单选批量读取：
Array.from(document.querySelectorAll('tbody tr select')).map(s => s.value) - 多选（
multiple）必须用s.selectedOptions：Array.from(s.selectedOptions).map(opt => opt.value) - 避免用
selectedIndex判断是否选中：它返回数字索引，但首项value=""时容易误判为“未选” - 推荐在
change事件里绑定行级处理，而不是等整表提交时再遍历——响应更快，也方便实时校验
表格里 select 的样式和可访问性怎么保？
表格单元格宽度固定、行高紧凑，原生 select 容易被截断或文字溢出；同时屏幕阅读器依赖语义结构，乱加 div 包裹会破坏可访问性链路。
- 别用
appearance: none后只改箭头却不补全键盘支持——方向键、回车、空格全部失效，视障用户无法操作 - 每个
select必须配id，对应label用for关联（哪怕 label 文字为空，也建议保留<label for="s-0"></label>） - 移动端小屏下，
select展开区域常被表格容器裁剪，加position: relative到td并设overflow: visible可缓解 - 禁用某行下拉？加
disabled在select上，不是td—— 后者只是视觉灰显，控件仍可聚焦、可提交
最易被忽略的点：表格里混用静态 HTML 和 JS 动态插入时，select 的 name 和 value 是否被正确同步到 DOM —— 尤其当用 innerHTML 替换整行，旧的事件监听器就丢了，得重新绑定或用事件委托。
