value=""是合法且推荐的写法，HTML规范允许其表示无有效业务值；必须配合disabled才能真正禁用选项，单独使用仍可被选中；后端收到空字符串应明确校验而非依赖隐式转换。
value="" 是合法且推荐的写法
HTML 规范明确允许 value 属性为空字符串，这不是 bug，而是设计使然。它本质是告诉表单：“这个选项不携带有效业务值”，后端或 JS 可统一用 select.value === "" 判空，比检查文本内容或索引更可靠。
常见错误是留空 value 属性本身（即不写 value），此时浏览器会回退到取 textContent 作为值——一旦文本含空格、换行或特殊字符，就可能被截断或解析失败。
- ✅ 正确：
<option value="">-- 请选择 --</option> - ❌ 错误：
<option>-- 请选择 --</option>（没写value，值变成字符串 "-- 请选择 --"） - ⚠️ 危险：
<option value=请选择>-- 请选择 --</option>（没加引号，空格导致属性截断）
空 value 配合 disabled 才真正防提交
只设 value="" 不够。用户仍可点中它、用键盘导航选中它，甚至在某些框架中触发 onChange 回调。要彻底阻止交互和提交，必须加 disabled。
disabled 的实际效果包括：鼠标不可点、Tab 键跳过、form.reset() 不恢复它、提交时完全忽略该选项。
立即学习“前端免费学习笔记（深入）”；
- 必须同时写
value=""和disabled，缺一不可 - 加
hidden是锦上添花：让该项不出现在下拉展开列表里（部分浏览器支持） - 加
selected是为了页面加载即生效，但注意：若已有其他selected项，浏览器会以最后一个为准
后端收到空字符串该怎么处理
PHP、Python Flask、Node.js 等主流后端默认把 value="" 解析为长度为 0 的字符串，不是 null 或 undefined。关键在于别混淆“空值”和“未提交”。
如果表单用了 required，浏览器根本不会提交空值——它会阻断提交并提示。所以你后端收到 ""，只有一种可能：前端去掉了 required，或用户绕过了前端校验（如禁用 JS 后手动提交）。
- 推荐校验逻辑：
if (request.form.get('status') == '')而不是is None - 数据库字段建议设为
NOT NULL DEFAULT ''或允许NULL，但不要依赖空字符串隐式转成NULL - 避免用
empty()（PHP）或not value（Python）直接判空，因为"0"、"false"也会被误判
JS 读取时别只信 select.value
DOM 中 select.value 是只读计算属性，它返回当前选中项的 value。但如果所有 option 都没设 value，它就会 fallback 到文本内容——这正是空格截断问题的根源。
更稳妥的做法是先定位选中项，再读它的 value 属性：
const sel = document.getElementById('labels');
const selectedOpt = sel.options[sel.selectedIndex];
const actualValue = selectedOpt?.value ?? '';
尤其在服务端渲染 + 客户端 hydration 场景下，直接读 sel.value 可能拿到旧缓存值；而通过 selectedIndex 查找，始终反映真实 DOM 状态。
