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

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

怎么让第一个 <option></option> 自动成为默认选中项

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

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

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

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

生成HTML格式PPT

从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。

下载

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

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

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

立即学习“前端免费学习笔记（深入）”；

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

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