最稳妥做法是<option value="" selected>请选择</option>，value为空字符串可被程序识别为未选，配合!select.value校验；需避免JS覆盖、多selected冲突、动态插入失效等问题，框架中须用受控组件并统一三端空值契约。
怎么让第一个
关键不是“让它看起来像提示”，而是“让它不可提交且能被程序识别为未选”。最稳妥的做法是：<option value="" selected>请选择</option>。value 为空字符串，后端或 JS 可直接用 !select.value 判断是否跳过校验；浏览器也认这个空值为合法初始状态。不要用 value="请选择" 或中文作 value，否则后端可能误判为有效输入。
为什么加了 selected 却没生效
常见原因有三个：
- JS 初始化时覆盖了 HTML 的默认状态，比如执行了
select.value = "xxx"或select.selectedIndex = 1 - 多个
<option>都写了selected，浏览器只取第一个，其余被忽略 - 选项是 JS 动态插入的，
selected属性对 createElement 或 innerHTML 创建的元素无效，必须手动设option.selected = true或select.selectedIndex = 0
option.defaultSelected 查看 HTML 是否真写了 selected，它不会被 JS 改变。
要不要给提示项加 disabled
加 disabled 能防止用户再次点中它触发 change 事件，尤其在 iOS Safari 上很实用；但它带来两个副作用：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 部分旧版 Android 浏览器仍允许触摸选中 disabled 项
- Chrome 桌面版在初始渲染时会把
disabled selected当作默认项，但之后无法再通过键盘或鼠标选中——这反而影响可访问性 - 表单重置（
form.reset()）会恢复到defaultSelected状态，而 disabled 项不会参与提交，所以 value 为空仍是安全的
value="" selected，再配合 JS 校验 if (!select.value) return；只有在明确遇到移动端误触问题时，才叠加 disabled 并加一层 change 拦截。
React/Vue 等框架里怎么处理
框架会接管 select 的 value 控制权，HTML 的 selected 属性会被忽略。必须用受控组件方式：
- React 中写
<select value={value} onChange={handleChange}>，初始value设为空字符串 - Vue 中用
v-model绑定一个空字符串初始值 - 渲染提示项时仍需
<option value="">请选择</option>，不能省略 value - 提交前务必校验
value !== ""，因为用户可能根本没动下拉框
defaultSelected 或额外状态标记来判断是否发生过真实交互。立即学习“前端免费学习笔记（深入）”；
最容易被忽略的是：value 为空字符串这件事，必须贯穿 HTML、JS、后端三端。前端漏掉 value=""，后端收到 "请选择" 字符串；JS 用 innerHTML 拼 option 忘了写 value，提交就变成空字段；框架里没初始化 value，受控组件会报 warning 且首次渲染异常。别把它当成样式问题，它本质是数据契约。
