option 元素无隐式默认 value,不写 value 时提交值为 textContent(含空格);占位项必须显式设 value="",否则提交文本内容导致校验失败;selected 仅影响初始选中,最终值由 select.value 决定,且需前后端 value 严格一致。

option 元素本身没有隐式默认 value,它的值完全取决于是否显式写了 value 属性——没写就是空字符串 "",但这个空字符串不是“默认值”,而是浏览器解析缺失属性时的 fallback 行为。
不写 value 时,提交的是什么
当 <option>文本</option> 没带 value 属性,表单提交或 JS 读取 select.value 时,实际取的是该 option 的 textContent(即标签内的文字)。
- 例如:
<option>北京</option>→ 提交值是"北京" - 再如:
<option> 北京 </option>→ 提交值是" 北京 "(含前后空格) - 如果内容为空:
<option></option>→ 提交值是""
为什么不能依赖“没写 value 就等于空”
很多人误以为不写 value 就安全地得到空值,结果后端收到的是字符串 "请选择" 或带空格的乱码,导致校验失败。
- 后端用
== ""判空会漏掉"请选择" - JS 里
select.value === ""在没写value且文本非空时永远为false - 框架(React/Vue)受控组件只比对
valueprop 和option.value,不看文本内容
占位提示项必须显式设 value=""
要做“请选择”这类不可提交的占位项,value="" 是硬性要求,不是可选项。
立即学习“前端免费学习笔记(深入)”;
- 写成
<option value="" selected>请选择</option>:语义清晰,提交值确定为空字符串 - 别写成
<option selected>请选择</option>:提交值是"请选择",后端要额外 trim + 等于判断 - 若加
disabled,仍需保留value="",否则某些框架或重置逻辑可能出错
selected 和 value 不一致时会发生什么
HTML 中 selected 只影响初始渲染选中状态,而最终提交值由当前 select.value 决定——它总是匹配某个 option.value,找不到就回退到文本内容。
- 比如:
<select><option value="a">A</option><option value="b" selected>B</option></select>→ 初始值是"b" - 但如果 JS 执行了
select.value = "c",而"c"不在任何option.value中,那么select.value会变成""(部分浏览器),或保持"c"(但selected状态丢失) - 所以:不要靠 JS 赋值去“模拟默认值”,该写
selected就写,该设value=""就设
最常被忽略的一点:前后端约定 value 值必须严格一致——大小写、空格、引号、类型(字符串还是数字)全都要对得上,否则 selected 白写了。



















