select 提交值错误的主因是缺少 name 属性或 option 未设 value；默认选中用 selected 属性最稳妥；disabled 会导致字段不提交，需用 hidden+文本替代；multiple 需后端支持数组解析，且 required 无法限制最少选择数。
直接用 <select> 和 <option> 就能跑起来，但多数表单出问题不是因为“不显示”，而是提交值错、默认选不中、禁用后数据丢失、多选后端收不到数组——这些才是真痛点。
为什么提交时拿不到 select 的值
最常见原因是 <select> 缺了 name 属性，或者某个 <option> 没写 value。浏览器会把没 value 的 <option> 的文本内容（比如“北京”）当提交值，但后端通常期望的是 value="bj" 这类简短标识。
-
<select name="city">是必须的，没它整个字段不会出现在表单数据里 - 每个
<option>显式写value，别依赖 innerText；<option>北京</option>提交的是字符串“北京”，不是空或 undefined - 禁用整个下拉框时加
disabled，但它会导致该字段完全不提交——哪怕有name - 如果需要“展示但不可改”，别用
disabled，改用<input type="hidden">+ 纯文本展示
如何正确设置默认选中项
用 selected 属性最稳妥，JS 动态设值次之。注意多个 selected 时只有第一个生效，且 selected 必须写在 <option> 上，不能只靠顺序。
- HTML 原生写法：
<option value="sh" selected>上海</option> - JS 设置：
document.getElementById('mySelect').value = 'sh'或.selectedIndex = 1 - 初始“无选择”状态：加一个
<option value="" selected disabled>-- 请选择 --</option>，disabled防止用户选中它 - 表单重置时默认值会丢，需监听
reset事件手动恢复selectedIndex
multiple 多选的实际表现和坑
加了 multiple 后，它就不再是“点击展开”的下拉样式，而变成固定高度的滚动列表（类似 size="4" 效果），移动端体验尤其割裂——iOS Safari 弹全屏选择器，Android 各厂商渲染不一。
立即学习“前端免费学习笔记（深入）”；
-
multiple是布尔属性，写上即生效，multiple="false"无效 - 后端必须能接收数组格式，如
hobbies=reading&hobbies=swimming，PHP 自动转成$_POST['hobbies']数组，其他语言得手动解析 - 没设
size时，默认只显示一行，用户看不到其他选项；建议显式设size="4"或用 CSS 控高 -
required对multiple几乎无效：只要有一个选项被选中，空值校验就通过，无法强制“至少选两项”
在表格里放 select 容易忽略的细节
直接塞进 <td> 没问题，但表格结构、移动端点击、动态填充都会放大底层限制。
- 别给
<select>套<div>或强行设display: block，会破坏表格流布局 - 移动端点击区域小？加
min-width: 120px和height: 36px更可靠 - 动态填充选项后要保留用户已选的值：先缓存
select.value，再清空重填，最后尝试恢复；若原值不在新选项中，select.value = xxx会静默失败（设为""） - 多行表格中区分每行数据：用
name="items[0][status]"这类嵌套命名，别只靠id—— id 只用于 JS 查找，不参与表单提交
真正麻烦的从来不是怎么写出来，而是 value 和 name 怎么对齐后端约定、disabled 怎么不影响数据流、multiple 之后怎么让前后端都认得那是数组——这些地方一错，调试时间远超写代码本身。
