服务端必须输出 selected，否则 SSR 水合失败；React/Vue 中 selected 属性无效，需确保初始 value 与 option value 严格一致；disabled option 加 selected 无意义；JS 动态设置需谨慎，优先用 select.value 并验证。
服务端必须输出 selected，否则 SSR 水合失败
React/Vue 等框架在服务端渲染时，如果 HTML 源码里没写 selected，客户端 JS 挂载后会发现 DOM 初始状态和虚拟 DOM 不一致，触发水合（hydration）错误，控制台报 Text content does not match 或类似 mismatch 提示，界面可能闪动或默认值丢失。
常见错误是：服务端只传数据、JS 在客户端动态设 select.value，但 HTML 中所有 <option></option> 都没带 selected —— 浏览器加载时默认选第一个，和你预期不符。
- 模板中要根据当前值，仅给匹配的
<option value="xxx"></option>加selected，比如 EJS/Handlebars 中：<option value="en" <%= lang === 'en' ? 'selected' : ''>>EN</option> - 静态站点生成器（如 Next.js、Nuxt）需确保每个语言页的 HTML 源码里，对应
<option></option>真的含有selected属性 - 千万别依赖“JS 后置设置”，首屏体验和 SEO 都会受损
JS 动态渲染后手动设 .selected = true 不可靠
用 JS 创建 <option></option> 并 append 到 <select> 后，直接写 option.selected = true 只影响当前选中状态，但不会让浏览器把该选项当作“初始默认项”；表单重置（form.reset()）时它不会恢复，且部分旧浏览器可能忽略。
更稳妥的做法是操作 select.value 或 select.selectedIndex，前提是 DOM 已就位。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 确保
<select>已插入文档，否则赋值无效（比如脚本放在<head>里） - 优先用
select.value = 'xxx'，比索引安全；但 value 必须严格匹配（包括大小写、空格） - 若 value 不确定，先遍历
select.options找到目标再设.selected = true，然后立即读select.value验证是否生效 - 需要触发监听？手动派发：
select.dispatchEvent(new Event('change', { bubbles: true }))
React/Vue 中 selected 属性完全无效
受控组件下，selected 属性被框架忽略。React 的 <select value={value}> 和 Vue 的 v-model 完全接管渲染逻辑，DOM 上的 selected 属性只是残余痕迹，不参与状态计算。
初始化出错，90% 是因为 value 状态和 <option value="xxx"> 不严格一致。
- 检查
useState初始值是否等于某个option的value字符串（不是 textContent，也不是对象） - 异步加载选项时，别先渲染
<select value={val}>，而options还是空数组——React 会渲染空白下拉框 - 服务端渲染场景，务必让初始
value和 SSR 输出的option[selected]对应，否则 hydration 失败
disabled 的 option 加 selected 没意义
即使你在 HTML 里写了 <option value="x" disabled selected>，浏览器也不会把它当默认选中项：视觉上不高亮，select.value 读出来是空字符串（除非其他非禁用项存在），表单提交也跳过它。
想实现“占位提示 + 默认不选中”，正确写法是：
-
<option value="" disabled hidden>-- 请选择 --</option>（hidden让它不出现在下拉列表中） - 真正默认项另起一行，且不加
disabled，只加selected - 别指望靠 JS 后续启用这个 disabled 项并让它“变成默认”，逻辑混乱且不可靠
真实项目里最常被漏掉的，是服务端没同步输出 selected —— 开发者以为“JS 能修好”，结果首屏错、SEO 错、水合错，三错叠加。
