selected属性仅在html首次加载时生效，作为初始状态快照；后续js或框架（如vue/react）通过select.value或v-model赋值会直接覆盖它，导致dom中selected属性仍存在但界面已不同步。
selected 属性只在 HTML 加载时起作用，后续 JS 或框架赋值会直接覆盖它——不是失效，而是被接管了。
HTML 里写 selected 但没生效？先查 JS 是否已覆盖
浏览器解析 HTML 时看到 selected，就把它当“初始快照”；一旦脚本执行 select.value = "" 或 select.selectedIndex = 0，界面立刻变，但 DOM 中那个 selected 属性值还留着，造成“看着对、实际错”的假象。
- 打开控制台，运行
document.querySelector('select').value，看输出是不是你期望的值 - 检查是否有框架初始化逻辑（如 Vue 的
mounted、React 的useEffect）或表单恢复脚本悄悄改了值 - SSR 场景（如 Next.js）下，服务端渲染的
selected必须和服务端传入的初始 state 完全一致，否则 hydration 会警告甚至错乱
多个 option 都写了 selected，会发生什么
浏览器只选中第一个带 selected 的 <option></option>，其余的虽保有 selected 属性，但不参与视觉选中——这会导致 JS 查询时出错：
-
Array.from(select.options).filter(opt => opt.selected)可能返回多个true，但界面上只有一个高亮项 - 永远只给一个
<option></option>加selected，且不要写成selected="true"或selected="selected"，HTML5 中布尔属性只需存在即可 - 禁用项（
<option disabled></option>）加了selected也不会显示为选中，部分浏览器还会跳过它去选下一个可用项
JS 动态设默认项：用 select.value，别只碰 option.selected
option.selected = true 只改 DOM property，不触发滚动、不更新 select.value，界面可能毫无反应；而 select.value = "jp" 一行就能同步所有状态。
- 确保目标
<option value="jp"></option>已存在于 DOM 中，否则select.value会变成空字符串，且无视觉变化 - 动态插入新
<option></option>后，不要等option.selected = true，直接select.value = 新值更稳 - 若需触发监听函数（如校验、联动），手动派发事件：
select.dispatchEvent(new Event('change', { bubbles: true }))
React/Vue 里 selected 属性完全无效
这些框架把 <select></select> 当作受控组件，渲染由 state/props 驱动，HTML 层的 selected 属性会被忽略。常见报错：“a component is changing an uncontrolled input to be controlled” 就是因为初始 state 没设好。
- React 中必须用
valueprop 绑定 state，并通过onChange同步更新；初始值必须严格匹配某个<option value="xxx"></option>的字符串值（注意类型，数字 1 ≠ 字符串 "1"） - Vue 中
v-model初始值要在 data/computed 中明确声明，且不能是空数组加载前就绑定；异步 options 建议先设selectedValue: null，数据到达后再赋值 - “请选择”这类占位项，推荐用
<option value="" disabled hidden>请选择</option>，避免被提交又不影响初始展示
最常被忽略的复杂点是：HTML 的 selected 和 JS 的 select.value 是两套状态，浏览器内部以后者为准。别指望属性写对了就万事大吉——得盯住真实值，尤其在混合使用原生 JS 和框架的场景里。
