应使用 disabled 而非仅 hidden，推荐写法为 -- 请选择 --：value="" 确保提交为空字符串，disabled 阻止交互与提交，hidden 隐藏于下拉列表，selected 保证初始选中。
option 默认占位项该用 disabled 还是 hidden
想让“请选择”这类提示文字不参与提交、也不被用户选中，disabled 是必须的，hidden 是可选的补充。只加 hidden 不加 disabled，该项仍能被键盘导航选中并提交；只加 disabled 而不设 value=""，某些后端框架可能把 disabled 项的 value 当作空字符串提交（尤其在未显式拦截时）。
推荐写法：<option value="" disabled hidden selected>-- 请选择 --</option>
-
value=""：确保提交时字段值为空字符串，便于后端统一判空 -
disabled：阻止鼠标点击和键盘选中，且表单重置（form.reset()）会跳过它 -
hidden：避免它出现在下拉展开列表中（部分浏览器支持，非必需但更干净） -
selected：保证页面加载即生效，且是唯一带selected的<option></option>
为什么不能只靠 required 代替默认占位
required 是验证属性，不是显示控制属性。它只在表单提交时检查是否为空，对初始渲染毫无影响——即使没写 selected，浏览器仍会默认选中第一个 <option></option>，哪怕它是“请选择”这种无效项。
后果很直接：<select required><option value="">请选择</option>
<option value="ok">确定</option></select> 页面一打开就处于“已选中但不合法”状态，用户还没动就触发了验证红框。
- 正确做法：用
disabled+selected把占位项锁死，再靠required确保用户必须切换到有效项 - 错误联想：
required不等于 “自动跳过第一项” 或 “强制让用户点一下” - 兼容性注意：IE11 对
disabled在<option></option>上的支持不稳定，若需兼容，改用 JS 动态禁用或服务端渲染时跳过生成该选项
selected 写在多个 <option></option> 上会发生什么
浏览器只认第一个带 selected 的 <option></option>，后续所有 selected 都被忽略。DOM 结构虽不报错，但语义非法，且容易引发维护困惑——比如后端模板循环渲染时忘了排他逻辑，导致多个 selected 并存。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
更隐蔽的问题是：React/Vue 等框架的受控组件完全无视 selected，只看 value prop 是否匹配某个 option.value。如果 HTML 里多写了 selected，而 JS 层又没同步清理，会让人误以为“默认值生效了”，实际却没渲染出来。
- 服务端渲染时，务必确保只有一个
<option selected></option>，且其value与传入的默认值严格一致（包括空格、大小写、类型） - 前后端值比较别用
==，用===或字符串.trim()后比对 - 调试技巧：打开 DevTools，检查
<select></select>元素的value属性值，它才是真实选中状态，不是看哪个<option></option>有selected属性
JS 动态设置占位项时最容易漏掉的一步
用 select.value = "" 设置回占位状态后，界面看起来正常，但监听 change 的校验函数不会触发——因为 DOM 没派发事件。用户看不到反馈，表单可能卡在“已修改但未校验”状态。
必须手动补上：select.dispatchEvent(new Event('change', { bubbles: true }))。否则，依赖 change 事件的实时校验、联动下拉、按钮启用逻辑全失效。
- 不要只改
value，还要确保select已挂载到 DOM（常见于 Vue/React 组件mounted或useEffect中操作） - 如果用
selectedIndex，注意索引为-1无法选中任何项，只能设为0或对应占位项位置 - 避免在
DOMContentLoaded前执行，否则getElementById返回null
真实场景里，“请选择”不是装饰，而是防止误提交的第一道防线。它的属性组合、前后端一致性、事件触发链，任何一个环节断掉，都会让表单行为变得不可预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
