直接在<option>上加selected属性即可实现默认选中，它是布尔属性，无需赋值；仅能有一个option带selected，提示项应设value=""且disabled以避免提交空值；JS动态设置需确保DOM已加载，并手动派发change事件；框架中需用状态控制value而非HTML的selected。
直接在 <option> 上加 selected 属性就行
页面一加载，带 selected 的那个选项就会被自动选中。它是个布尔属性，写上就生效，不用赋值——selected="true" 或 selected="" 都是多余写法。
常见错误是给多个 <option> 都加了 selected：浏览器只认第一个，但语义混乱，后续 JS 读取 defaultSelected 时也会误判。
- 只给一个
<option>加selected - 如果这是“请选择”这类提示项，务必同时设
value=""，否则后端可能收到空字符串却当成有效提交值 - 别把
selected和disabled同时用在同一个<option>上——旧版 Safari 可能不把它当默认项渲染
“请选择”类提示项要禁用 + 空值 + 默认选中
纯靠 selected 的提示项（比如 <option>请选择</option>）有个严重问题：用户不点其他项就直接提交，表单会把空文本或空 value 当作已选择，导致后端校验失败。
正确做法是让这个提示项既显示为默认，又不可被再次选中：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 写成：
<option value="" selected disabled>请选择</option> -
value=""让后端/JS 能通过select.value === ""判断未选择 -
disabled防止用户点它触发change事件（现代浏览器基本支持disabled+selected组合） - 注意：
disabled的<option>不会出现在表单序列化结果里，所以提交时这个字段不会被发送
JavaScript 动态设置时别漏掉 DOM 加载时机
如果下拉菜单是 JS 动态生成的，或者你想根据 URL 参数恢复上次选择，就得用 JS 设置。但很容易踩坑：
-
select.value = "xxx"必须在<select>已挂载到 DOM 后执行，否则赋值无效 - 如果
"xxx"没匹配到任何<option>的value，select.value会变成空字符串，界面也不变 - 设置完不会自动触发
change事件，需要手动派发：select.dispatchEvent(new Event('change', { bubbles: true })) - 用
selectedIndex更稳定，但选项顺序变动后容易错位；用value更语义化，但要注意大小写和空格
React 或 Vue 里不能依赖 selected 属性
框架中 <select> 是受控组件，HTML 的 selected 属性会被忽略。你必须用状态控制 value，并绑定 onChange 更新状态。
比如 React 中写成：
<select value={selectedValue} onChange={(e) => setSelectedValue(e.target.value)}>
<option value="">请选择</option>
<option value="apple">苹果</option>
</select>
这时候初始值由 selectedValue 的初始 state 决定，不是 HTML 里的 selected。漏掉这步，下拉框会显示为空白或 fallback 到第一个选项，且无法响应用户操作。
真正容易被忽略的是：服务端渲染（SSR）或静态 HTML 首屏时，如果 JS 还没加载完，用户看到的是 HTML 渲染的默认项；但 JS 加载后立刻接管，若 state 初始化不对，会出现闪烁或错位。所以初始化 state 时最好和 HTML 的预期一致。
