原生下拉菜单为空或无反应的最常见原因是缺少或其位置错误；必须显式写value属性、用name提交、避免disabled占位项、multiple需特殊取值，且name不可缺失或含空格。
原生 <select></select> 必须手动写 <option></option>，漏一个就空白；没 name 属性，后端永远收不到值。
为什么下拉菜单点开是空的或根本没反应
最常见原因是：<select></select> 标签里没写任何 <option></option>，或者 <option></option> 被错放在 <select></select> 外面。浏览器不会自动补选项，也不会报错，只渲染一个“空壳”。
- 每个
<option></option>至少得有文本内容或value属性，否则 JS 读不到、表单也提交不了有效值 -
<option>苹果</option>这种写法虽能显示，但提交值是字符串“苹果”，含中文或空格时，Django/Flask 等框架可能解析失败 - 推荐统一显式写
value：<option value="apple">苹果</option>，避免依赖默认行为 - 检查开发者工具 Elements 面板，确认
<option></option>确实嵌套在<select></select>内部，且没有被 JS 动态清空
如何设默认选中项又不让它被提交
用占位提示项（如“— 请选择 —”）配合空 value 和 selected 属性，是最稳妥的做法。它既满足用户引导，又方便后端校验是否跳过选择。
- 写法：
<option value="" selected>— 请选择 —</option> - 不要用
disabled加在占位项上：部分旧浏览器（如 IE11）不支持<option disabled></option>，且即使生效，键盘仍可切换到它，导致表单意外提交空值 - 后端收到
value=""就代表未作有效选择，可直接返回校验错误 - 如果真要禁用某项（比如“广州(暂不可选)”），只给对应
<option></option>加disabled，但别加selected，否则会卡在不可选状态
multiple 属性开启多选后，JS 和后端怎么取值
加了 multiple，行为和语义全变了：视觉变成列表框、提交变成数组格式、JS 获取方式也不同。硬套单选逻辑必出错。
- HTML 中写
<select multiple name="hobby"></select>，不是multiple="true"或拼错成multipile - JS 不能用
select.value——它只返回第一个选中项；得用select.selectedOptions，再转成数组：Array.from(select.selectedOptions).map(opt => opt.value) - 后端必须按数组接收：
request.form.getlist("hobby")（Flask）、$_POST["hobby"]（PHP），而不是$_POST["hobby"]单值 - 移动端体验差：多数手机浏览器会弹全屏选择器，且不提供明确“完成”按钮，普通用户容易误操作；面向用户的页面建议改用
<input type="checkbox">组合
name 和 id 搞混会导致表单丢值
name 是表单提交的命脉，id 只是定位用的辅助标识。两者功能完全不重叠，混用是丢值第一大原因。
-
name缺失或为空（如name=""或name="user role"含空格），字段就不会出现在 HTTP 请求的 body 里 -
id可以不写，也可以和name不同；但若用了<label for="xxx"></label>，里面的for值必须严格等于<select id="xxx"></select>的id - 检查 Network 面板里的 Form Data，确认提交 payload 中是否有该字段名，以及值是否符合预期
- 如果
<select></select>在<form></form>外，或被display: none包裹，它也不会参与提交，哪怕有name
真正难的不是写出下拉菜单，而是让它的 value 始终可控、可测、可维护——尤其当它要对接后端校验、被 JS 动态修改、或在多个浏览器里保持一致行为时，每个 value、每个 name、每个 selected 的位置，都得经得起推敲。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
