直接改option.selected可动态设置选中状态，但需确保DOM已就位；select.value按值匹配，select.selectedIndex按索引设置更稳定；React/Vue中HTML的selected属性无效，须用状态控制。
直接改 option.selected 就生效，但得确保 DOM 已就位
页面加载后想切换默认选中项，最直接的方式是给目标 option 元素赋值 selected = true。这不会影响 HTML 源码里的 selected 属性，只改变当前运行时状态。
常见错误是脚本执行太早：比如放在 <head> 里，或没等 <select> 渲染完就操作。此时 document.querySelector('option[value="us"]') 返回 null，赋值无效。
- 务必等 DOM 加载完成：
document.addEventListener('DOMContentLoaded', ...)或把 script 放在 body 底部 - 动态插入的
option元素（如用document.createElement('option')创建），必须先 append 到select再设selected = true - 别用
setAttribute('selected', '')—— 虽然能触发初始渲染逻辑，但后续行为不一致，尤其在表单重置时容易出错
select.value 和 select.selectedIndex 哪个更稳？
两者都能改变当前选中项，但语义和容错性不同：
-
select.value = "us"：按 value 字符串匹配，大小写、空格、类型都必须完全一致；匹配失败时select.value变为空字符串，UI 不变，也不报错 -
select.selectedIndex = 2：按位置硬设，不管 value 是什么；哪怕第 2 个option的value是空或非法，也会被高亮——适合选项结构固定且顺序可控的场景 - 若要清空选中（比如多选转单选前重置），设
select.selectedIndex = -1；但注意：如果select有required属性，这个操作会导致表单校验失败
React/Vue 里写 selected 属性完全没用
框架接管了 select 的渲染逻辑，HTML 中的 selected 属性会被忽略。你看到的“默认选中”只由状态驱动：
立即学习“前端免费学习笔记（深入）”；
- React：靠
valueprop 控制，初始化useState("us")，且"us"必须严格等于某个option的value字符串（不能是数字123而 option 是"123"） - Vue：靠
v-model绑定的变量值匹配option.value，初始值必须存在且可比对；异步加载选项时，别先渲染空options的select，否则界面空白 - 调试技巧：React DevTools 里看组件 props 的
value是否正确；Vue DevTools 看响应式数据是否与option的value完全一致
为什么写了 selected 却没生效？优先查 JS 覆盖
最常见原因是 JS 脚本在 DOM 加载后立刻执行了 select.value = ... 或 select.selectedIndex = ...，直接覆盖了 HTML 声明的初始状态。
- 用浏览器开发者工具，在 Elements 面板里右键对应
option→ “Break on” → “attribute modifications”，看是否有脚本修改了selected属性 - 检查
console.log(option.defaultSelected)（反映 HTML 是否真写了selected）和console.log(option.selected)（反映当前实际状态），二者不一致说明被 JS 干扰 - 动态生成的
option（如 fetch 后拼接）不会自动识别 HTML 的selected，必须手动设option.selected = true或同步更新受控组件的状态
selected 属性只管初始渲染那一瞬；之后的一切交互、状态变更、异步加载，都得靠 JS 或框架状态来驱动——这点最容易被当成“属性没生效”而反复折腾。 
