默认显示第一项需区分“占位提示”与“真实默认值”：若为占位项应设value=""且不加selected；若为真实默认值则显式添加selected属性，但须确保唯一性、避免JS或框架覆盖。

默认显示第一项不是“加 selected”就能解决的事——它取决于你想要的到底是“占位提示”还是“真实默认值”，以及是否被 JS 或框架覆盖。

怎么让第一个 自动成为默认选中项

浏览器在解析 时，若所有 都没写 selected，会隐式选中第一个。但这不可靠，尤其在服务端渲染或框架场景下容易被忽略或覆盖。

• 显式写 美国 是最稳妥的原生做法
• 不要写 selected="true" 或 selected="selected" —— selected 是布尔属性，仅存在即生效
• 确保整个 中只有一个 selected；多个时浏览器只认第一个，但 DOM 已不合法
• 如果第一个 是 -- 请选择 --，就别加 selected，否则表单会提交空值

为什么加了 selected 却没显示第一项

常见原因是 JS 覆盖了 HTML 初始状态，或者框架接管了控制权。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 检查是否有脚本执行了 select.value = ... 或 select.selectedIndex = ...，哪怕只在 DOMContentLoaded 后一秒执行，也会覆盖 selected
• 用浏览器开发者工具查看该 的 selected 属性是否还在，再看 select.selectedOptions 返回什么
• React/Vue 等框架中，selected 属性完全无效：React 的 只认 value prop 是否匹配某个 option value
• 动态插入 后，HTML 的 selected 属性不会自动生效，必须手动设置 option.selected = true 或改 select.value

如何安全实现“无默认值”的占位提示

所谓“默认显示第一项”，很多时候其实是想让用户必须主动选择，而不是误提交占位文字。

• 用 ：禁用 + 隐藏，既不参与提交，也不出现在下拉列表里
• 避免 disabled 和 selected 同时出现——旧版 Safari 可能不识别这种组合，导致初始状态为空白
• 后端或 JS 校验时，只检查 select.value === "" 即可判断未选择，无需额外字段标记
• 如果用框架，初始化 state 时不要设成 ""，除非你确定有 ，否则 React 会渲染空白下拉框

真正容易被忽略的点是：HTML 的 selected 只在初始渲染时起作用，后续任何 JS 赋值、框架重绘、异步加载选项，都会让它失效——这时候你得换思路，用 value 控制，而不是依赖属性。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！