正确方案是-- 请选择 --：它视觉提示明确、不提交值、可被js/后端准确识别为“未选择”，且兼容各浏览器与框架。
select 首项显示为空白，但又不能靠“空 option”糊弄校验逻辑——这事没法绕开语义和行为的双重约束。直接写 <option></option> 会导致后端收不到字段、JS 判定为未选、required 校验失败，还可能被框架当成非法初始值。
为什么 <option></option> 不行
这种写法渲染出的 option 没有 value，浏览器会把它的文本内容（即空字符串）作为提交值；但更麻烦的是：它没有显式 value，部分后端框架（如 Django 的 ChoiceField）会拒绝空字符串选项，直接抛出验证错误。同时，HTML5 的 required 属性会把它识别为“已选中但值为空”，导致表单通过校验却提交了无意义空值。
- 浏览器实际提交的是
name=（等号后无值），不是name="" - React/Vue 等框架若用受控模式，
value为""时可能触发 warning：“changing an uncontrolled input” - 移动端 Safari 对空
value的option处理不一致，有时不触发change事件
真正可用的首项占位写法
必须满足三个条件：视觉上是提示语、不参与提交、能被 JS 和后端明确区分“未选择”。唯一可靠方案是显式设 value="" + selected + 文本提示，并确保它不带 disabled（否则部分旧浏览器不渲染为默认选中）。
- 正确：
<option value="" selected>-- 请选择 --</option> - 别写
value=" "（含空格），后端收到的是带空格字符串，判空逻辑要额外 trim - 别给这个占位项加
disabled，否则 iOS Safari 可能不把它当初始选中项 - 如果用了 React，必须用
valueprop 控制，且初始 state 设为""，不能依赖 HTML 的selected
JS 动态设置首项为空时的坑
用 JS 初始化 select.value = "" 看似简单，但容易失效——尤其在 DOM 尚未就绪或选项是异步加载时。
- 确保
select已挂载，且至少有一个option存在（哪怕只是占位项） - 如果
select是空的，select.value = ""不会报错，但界面毫无反应 - 用
select.selectedIndex = 0更稳妥，但它强制选中第一个option，所以必须保证第一个就是那个value=""的占位项 - 动态插入
option后，仅设option.selected = true不够，还得同步执行select.value = ""，否则某些安卓 WebView 不刷新视觉
后端怎么安全识别“真没选”
前端传来的 value="" 是唯一可信信号，但得配合后端处理逻辑，否则容易和“用户主动选了空值”混淆（虽然业务上不该允许后者）。
- Express：检查
req.body.fieldName === ""，而不是!req.body.fieldName（避免 null/undefined 误判） - Django：字段定义为
choices时，确保元组里包含("", "— 请选择 —")，否则表单验证直接失败 - Flask：用
request.form.get("field", type=str)显式转字符串，避免None和""混淆 - 关键点：不要在后端把空字符串自动转成
null或忽略——得让它原样暴露，才能做业务判断
最易被忽略的是：占位项的 value="" 必须和后端校验逻辑对齐。很多团队前端写了 value="all"，后端却按 "" 做空判断，结果永远进不了“未选择”分支。统一用 ""，并写死在接口文档里，比任何框架适配都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
