SELECT可直接放入td/th中，无需额外容器；name属性区分多行值，value用英文ID避免编码问题；动态填充需保存并恢复选中值；禁用用disabled而非pointer-events；样式与可访问性需兼顾原生结构。
表格单元格里直接放 SELECT 标签就行
不用额外包裹或特殊容器，SELECT 本身就是行内可替换元素，能自然嵌入 <td> 或 <th> 中。常见错误是误以为要加 <div> 或设置 display: block，反而破坏表格布局流。
典型写法就是：
<table>
<tr>
<td>状态</td>
<td><select name="status">
<option value="draft">草稿</option>
<option value="published">已发布</option>
<option value="archived">归档</option>
</select></td>
</tr>
</table>
- 确保
SELECT在<td>内闭合，不要跨单元格 - 如果表格用了
border-collapse: collapse，下拉箭头可能被裁切——加padding或调小font-size缓解 - 移动端点击区域小？给
SELECT加min-width: 120px和height: 36px更易点
多个下拉列表如何区分提交值？靠 name 和 value
表格常有多行，每行一个 SELECT，但后端需要知道“哪一行选了什么”。关键不是用 id（只用于 JS 操作），而是靠 name 配合数组式命名或行标识。
- 简单场景：每行用唯一
name，如name="row_1_status"、name="row_2_status" - 批量处理更常用：
name="status[]"（PHP）或name="items[0].status"（JSON 表单），取决于后端解析习惯 -
value必须是纯字符串，别用空格或中文作 value（如value="已发布"可能被 URL 编码污染），优先用英文或 ID，显示文本用<option>内容控制
用 JavaScript 动态填充选项时，注意 SELECT 的初始状态
从 API 加载数据后插入 OPTION，容易忽略用户已手动选过但还没提交的值，导致重绘后丢失选择。
立即学习“前端免费学习笔记（深入）”；
- 先读取当前
select.value，再清空innerHTML或遍历options移除，最后插入新项 - 插完立即恢复原值：
select.value = savedValue（即使该值不在新选项中，浏览器会设为""，需额外判断） - 避免用
select.innerHTML = "<option>..."全量替换——IE 和旧 Safari 可能触发两次change事件 - 推荐方式：
select.replaceChildren(...newOptions)（现代浏览器）或循环select.appendChild(opt)
样式冲突和可访问性容易被忽略
默认 SELECT 在不同浏览器渲染差异大，CSS 覆盖有限，且屏幕阅读器依赖原生结构。
- 别对
SELECT强制设background+color却不配appearance: none—— Firefox 下箭头会消失，Chrome 下可能错位 - 必须保留
<label>关联：用for属性指向SELECT的id，否则键盘用户 Tab 进入后无法明确当前控件含义 - 禁用某行下拉？用
disabled属性，别只加pointer-events: none—— 后者阻止交互但表单仍会提交该字段 - 如果某行选项完全动态（比如二级联动），记得在 JS 中同步置空后续
SELECT并设disabled，避免脏数据
SELECT 的 value、disabled 状态、option 列表三者得始终对齐，否则用户点半天没反应，或者提交了不该提交的值。 
