表格单元格内使用下拉框需满足五项条件：select必须有name属性；option必须有value值且至少一个；提示项应同时设disabled和selected；禁止在select标签内直接写文本；移动端需防全屏卡顿，多选慎用。
直接往 <td> 里塞 <select> 就能用，但容易出错——不是不显示，就是提交空值、移动端卡死、默认项不生效。
下拉框写在 <td> 里必须满足哪些 HTML 结构条件
表格单元格内放下拉框，结构上没特殊限制，但漏掉关键属性就会失效：
-
<select>必须带name属性，否则表单提交时整个字段消失（后端收不到） -
<option>至少有一个，且不能只写文字不写value（比如<option>北京</option>提交的是空字符串） - 提示项（如“--请选择--”）建议同时加
disabled和selected，否则用户可能误选空值 - 别把文本直接写在
<select>标签里，像<select>请选择</select>完全无效
正确示例：
<td><select name="province"><option value="" disabled selected>--请选择省--</option><option value="hebei">河北省</option><option value="shandong">山东省</option></select></td>
selected 属性为什么经常不生效
静态页面里靠 HTML 属性设默认项，但很多人栽在这几个细节上：
立即学习“前端免费学习笔记（深入）”；
- 多个
<option>都写了selected，浏览器只认第一个，后面的被忽略 - 用了
selected="true"或selected="selected"—— 冗余写法，HTML5 只要存在该属性就生效，值是什么不影响 - JS 动态设置时改了
option.selected = true，但没同步更新select.value，导致表单提交还是旧值 - 服务端渲染（SSR）或框架注入 HTML 后，JS 在 DOM 挂载前就执行，读到的
select.value是空字符串
更稳的做法：初始状态全靠 HTML 的 selected；JS 后续操作统一用 select.value = "xxx" 或 select.selectedIndex = n。
移动端 <select> 在表格里特别容易出问题
iOS Safari 和部分安卓浏览器会强制唤起全屏系统选择器，导致页面被顶高、滚动位置丢失，甚至卡住不动。表格场景下尤其明显：
- 表格本身有横向滚动时，点开下拉菜单后视口可能错位，再点其他单元格就点不中
- 键盘弹出 + 下拉菜单同时触发，页面布局反复重排，体验断裂
- 原生
<select>无法自定义样式，iOS 上箭头图标和字体大小完全不可控 - 如果表格用了
position: sticky或transform，某些 Android WebView 会直接不显示下拉箭头
临时缓解办法：
- 给 <select> 加 style="min-width: 120px;" 防止 iOS 压缩宽度导致点击区域过小
- 表格外层加 touch-action: manipulation 减少误触滚动
- 真正要稳定，得换方案：用 <div> + JS 模拟下拉，或引入轻量级库（如 Choices.js），但那就脱离纯 HTML 范畴了。
多选下拉框（multiple）在表格里慎用
加了 multiple 属性后，它就不再是“下拉”了，而是变成一个固定高度的滚动列表，视觉和交互都变了：
- 用户得按住 Ctrl/Cmd 才能多选，移动端基本没法操作（iOS 强制全屏，Android 表现混乱）
- 提交时字段名会重复出现（如
hobby=reading&hobby=swimming），后端必须按数组接收，不是所有框架默认支持 - 如果不配
size属性，有些浏览器只显示一行带滚动条，用户根本看不到其他选项 - 表格单元格宽度有限，
multiple列表撑开后容易破坏表格布局
结论：真要多选，别塞进表格单元格；要么拆成多个单选 <input type="checkbox">，要么单独抽离到弹窗/侧边栏处理。
表格里放下拉框这事，看着简单，但 name、value、selected、移动端兼容、多选陷阱这五处，任意一处写错都会让功能半残。最保险的做法是：先写纯 HTML 跑通，再加 JS 交互，最后在真机上点三遍——别信模拟器。
