下拉菜单点开为空或无反应的最常见原因是<option>未嵌套在<select>内、漏写<option>或使用非法自闭合写法；提交丢值则因缺少name属性或<option>未显式设置value。
直接写 <select></select> 和 <option></option> 就能渲染出下拉菜单，但漏掉 name、value 或嵌套错误，它就会“看起来有、点开空、提交丢值”。
为什么点开下拉框是空的或根本没反应
浏览器不会报错，只会静默渲染一个“空壳”。最常见原因就三个：
-
<option>标签没写在<select>内部——比如错放在<body>里，或者被 JS 动态删掉了 - 写了
<select></select>却一个<option>都没加 - 用了自闭合写法，比如
<option />—— HTML 不合法，浏览器会丢弃文本内容
检查开发者工具的 Elements 面板，确认所有 <option> 确实嵌套在 <select> 开始与结束标签之间。
表单提交时后端收不到值或总是空字符串
核心就两点：缺 name，或 option 没显式设 value。
立即学习“前端免费学习笔记（深入）”；
-
<select>必须带name属性，否则整个字段压根不进表单数据（不是值为空，是字段消失） -
<option>苹果</option>这种写法提交的是字符串 “苹果”，含中文、空格、换行时，后端解析容易失败；应统一写成<option value="apple">苹果</option> - 如果第一个
<option>没value也没selected，浏览器仍会高亮它，但提交值是空字符串或带空格的文本，不可靠
怎么设默认选中项又不让它被误提交
用占位提示项是最稳妥的做法：一个 value=""、带 selected、但不加 disabled 的 <option>。
-
<option value="" selected>— 请选择 —</option>：用户看到提示，且提交时后端收到空值，可直接校验 - 别给占位项加
disabled：旧版 IE 不支持，且键盘仍可切换到它，反而导致意外提交空值 - 多个
option都写了selected？浏览器只认第一个，其余被忽略 - 如果唯一带
selected的项还加了disabled，页面加载后下拉框会显示为空白（因为禁用项不能参与选中逻辑）
禁用某一项 vs 禁用整个下拉框
行为完全不同，不能混用。
- 整框锁定：
<select disabled></select>—— 灰显、无法聚焦、无法点击、表单不提交该字段 - 单项置灰：
<option disabled>广州(暂不可选)</option>—— 该项不可选，但下拉框本身仍可操作，其他项照常可用 -
readonly对<select>无效，HTML 规范不支持，加了也白加 - 移动端要注意：
disabled的<select>在部分 Android 浏览器里仍可能响应触摸事件，建议配合pointer-events: noneCSS 做双重保险
