selected属性仅在HTML解析时生效，是初始状态快照；JS修改select.value或selectedIndex会覆盖它，但selected属性值不变，导致视觉与DOM状态不同步。
selected 属性只在页面加载时起作用
它不是实时响应的开关，而是 HTML 解析阶段的一次性声明。浏览器读到 selected，就把它当作“初始状态快照”，之后 JS 修改 select.value 或 select.selectedIndex 会直接覆盖它，selected 属性本身不会变，但视觉和行为已不同步。
常见错误现象：<option value="us" selected>美国</option> 写对了，但页面打开后默认选中的是第一项；原因往往是后续 JS 脚本（比如框架初始化、表单恢复逻辑）执行了 select.value = "" 或设了别的值。
- 检查控制台运行
document.querySelector('select').value，确认真实值是否符合预期 - 若用 React/Vue，
selected属性完全无效，必须靠组件状态驱动 - SSR 场景下（如 Next.js），服务端输出的
selected必须和服务端传入的初始值一致，否则水合（hydration）时会警告或错乱
多个 option 都写了 selected 会怎样
浏览器只认第一个带 selected 的 <option></option>，其余的被忽略——但 DOM 中它们的 selected 属性仍为 true，导致 JS 查询 option.selected 时返回错误判断。
例如：Array.from(select.options).filter(opt => opt.selected) 可能返回多个 true，但实际界面只高亮第一个。
立即学习“前端免费学习笔记（深入）”；
- 永远只给一个
<option></option>加selected - 不要写
selected="selected"或selected="true"，这是冗余且 XHTML 风格的写法，HTML5 中只需selected - 禁用项（
<option disabled></option>）加了selected也不会显示为选中，且部分浏览器会跳过它去选下一个可用项
JS 动态设置默认选中要同步两个地方
只改 option.selected = true 不够，界面可能不变；只设 select.value = "x" 更可靠，但得确保对应 <option value="x"></option> 已存在。
本质是两套状态：HTML attribute（selected）和 DOM property（option.selected / select.value），浏览器内部以 select.value 为准。
- 推荐做法：
select.value = "jp"，一行搞定，自动滚动、高亮、更新所有关联状态 - 如果必须操作 option：
option.selected = true后，立刻跟一句select.value = option.value - 动态插入新
<option></option>后，不要等option.selected = true，直接select.value = 新值，更稳 - 设完若需触发监听函数（如表单验证），手动调用
select.dispatchEvent(new Event('change', { bubbles: true }))
React 和 Vue 里 selected 属性完全失效
因为 <select></select> 在这些框架中是受控组件，渲染完全由 state/props 驱动，HTML 层的 selected 属性会被忽略。
比如 React 中写 <option value="us" selected>美国</option>，但 value prop 是空字符串，那下拉框就是空白——哪怕 HTML 源码里有 selected。
- React：必须用
valueprop 绑定状态，并在onChange中同步更新；初始值要和某个<option value="..."></option>完全匹配（包括类型） - Vue：同理，
v-model值必须与某项:value严格相等；异步加载 options 时，别让v-model先绑定空数组或空字符串 - 调试技巧：React DevTools 或 Vue DevTools 里直接看组件的 props/state 值，比查 HTML 更准
最易被忽略的点是：你以为的“默认值”来自 HTML，其实早已被 JS 或框架接管；真正起效的永远是运行时的 select.value 或绑定的状态值，而不是源码里那个 selected。
