selected属性仅在页面首次加载时对生效；JS动态操作需同步设置option.selected和select.value，SSR中必须服务端输出selected，否则触发水合错误。
HTML selected 属性为什么没生效
直接原因：它只在页面首次加载时起作用，且仅对 <option></option> 元素有效；如果用 JS 动态插入 <option></option> 或修改 selected 属性但没同步更新 selectedIndex，浏览器不会自动高亮显示。
常见错误现象：
– 写了 selected="selected" 但下拉框打开后第一项仍是空白或默认选中第 0 项
– 用 JS 设置 option.selected = true 后界面没变化
– Vue/React 中绑定 v-model 或 value 后，selected 属性被框架忽略
-
selected是 HTML 属性（attribute），不是 DOM 属性（property）；JS 修改要用option.selected = true，而不是option.setAttribute('selected', '') - 必须确保目标
<option></option>已存在于 DOM 中——动态渲染的选项要等挂载完成再设selected - 若
<select></select>有value属性，浏览器会优先按该值匹配<option value="xxx"></option>并自动选中，此时selected可能被覆盖
怎么让某个 <option></option> 真正默认选中
最稳的方式是：服务端或初始 HTML 中就写对，不要依赖 JS 补救。但如果必须用 JS 控制，得同时操作 DOM 和原生 select 的状态。
- 静态写法（推荐）：
<option value="2" selected>北京</option>—— 注意不要写成selected="true"，只写selected或selected="" - JS 设置（DOM 已就绪）：
document.querySelector('option[value="2"]').selected = true;<br>document.querySelector('select').value = '2'; // 同步 value，避免不一致 - 动态添加后选中：
const opt = document.createElement('option');<br>opt.value = '3';<br>opt.textContent = '深圳';<br>select.appendChild(opt);<br>select.value = '3'; // 直接设 select.value，比操作 option.selected 更可靠
selected 和 select.value 的关系
它们是两套机制：一个是声明式（HTML attribute），一个是运行时状态（JS property）。浏览器内部会把 select.value 设为当前选中项的 value，并反向影响哪个 option.selected 为 true。
立即学习“前端免费学习笔记（深入）”；
- 设置
select.value = 'x'会自动把对应<option value="x"></option>的selected属性设为 true（即使原来没写） - 只改
option.selected = true不触发select.value更新，可能导致表单提交时取到旧值 - 多选
<select multiple></select>下，select.value只返回第一个选中项，得用select.selectedOptions遍历
兼容性与 SSR 场景下的坑
在 Next.js、Nuxt 等服务端渲染框架里，HTML 初始状态由服务端生成，JS 在客户端执行时可能面临“水合 mismatch”：服务端没设 selected，但客户端 JS 立即去设，React/Vue 会警告甚至丢弃该变更。
- SSR 中想默认选中，必须让服务端输出带
selected的<option></option>，不能靠客户端 JS “补” - 某些老版本 Safari 对
selected=""解析异常，建议统一用selected（无值）写法 - 使用
<datalist></datalist>时，selected完全无效——它不参与表单提交，也不支持默认选中逻辑
真正麻烦的不是怎么写 selected，而是搞清它在哪一层起作用：是 HTML 解析时、JS 执行时，还是框架数据绑定时。三者混用，不出问题才怪。
