在HTML5中，为下拉菜单设置默认选中项需在目标<option>标签中添加selected布尔属性，存在即生效，且同一<select>中仅允许一个<option>拥有该属性，多个时浏览器仅认第一个；selected不可与disabled共存，否则不生效；React/Vue等框架中该属性被忽略，须通过状态控制。
直接在
页面加载时默认选中哪个选项，由 HTML 解析阶段决定，不是靠 JS 赋值。只要在目标 <option> 标签里写上 selected，浏览器就会把它当默认项——这个属性是布尔型，存在即生效，selected="true" 或 selected="selected" 都是冗余写法。
- 必须只在一个
<option>上用selected，多个同时出现时，浏览器只认第一个，但 DOM 已不合法 - 别把
selected和disabled写在同一个<option>上，否则视觉不高亮，且该值无法提交 - 如果想设“请选择”为占位提示项，推荐：
<option value="" selected>-- 请选择 --</option>，value 为空方便后端或 JS 判断是否真有选择
为什么写了selected却没生效
最常见原因是 JS 覆盖了初始状态。比如脚本一运行就执行 select.value = "xxx" 或 select.selectedIndex = N，会立刻覆盖 HTML 里声明的 selected。另外，动态插入的 <option> 元素不会自动识别 HTML 的 selected 属性，得手动设置。
- 检查控制台是否有脚本在 DOM 加载后立即修改了
select.value或selectedIndex - 确认
<select>已挂载到 DOM 再操作，放在<head>里的脚本容易踩坑 - 调试时可用
console.log(option.defaultSelected)看 HTML 是否真写了selected，用option.selected看当前实际状态
React/Vue 里不能靠selected属性
框架里 <select> 是受控组件，HTML 的 selected 属性会被忽略。React 看的是 value prop，Vue 看的是 v-model 绑定的值。你写 <option selected> 在 JSX 或 Vue 模板里完全不起作用，甚至可能触发 warning。
- React：初始化
useState时，让value等于你要的默认value字符串，比如useState("us") - Vue：确保
v-model初始值与某个<option value="xxx">的value完全一致 - 异步加载选项时，别先渲染空
options的<select value={val}>，会导致空白；用条件渲染控制显示时机更稳妥
JS 动态设置默认值该用value还是selectedIndex
两者都能改，但行为不同，选错容易出问题。select.value = "us" 更直观，但要求字符串完全匹配（包括空格、大小写）；select.selectedIndex = 2 按位置操作，快但脆弱——选项顺序一变就失效。
立即学习“前端免费学习笔记（深入）”；
- 用
value设置时，若没找到匹配项，select.value会变成空字符串，界面无反应，但不会报错 - 用
selectedIndex设置时，哪怕第 2 个<option>的value是空或非法，也会被强制选中 - 无论哪种方式，如需触发监听函数（比如表单校验），都得手动派发事件：
select.dispatchEvent(new Event('change', { bubbles: true }))
真实场景里最容易被忽略的点：服务端渲染时没注入 selected，导致首屏闪动；框架中误信 HTML 的 selected 而没同步控制 state；移动端点击禁用提示项仍触发 change 事件。这些都不是“会不会”的问题，而是“有没有想到它会在特定条件下失效”。
