html中selected属性在动态渲染时失效的根本原因是浏览器解析时机与框架接管逻辑的双重干扰：服务端渲染多个selected导致dom非法，js动态插入option后未挂载就设selected无效，jquery字符串构造option会丢弃text/value，react/vue中selected仅装饰性，hydration阶段由状态覆盖，disabled与selected共存被规范禁止。
HTML中selected属性在动态渲染时为何失效
根本原因不是属性写错了，而是浏览器解析时机和框架接管逻辑的双重干扰。服务端渲染或模板引擎生成的多个 selected 属性（比如循环判断没加 break），会导致 DOM 结构非法——浏览器只认第一个，但后续 JS 读取 select.selectedOptions 或表单序列化时行为不可靠。更常见的是：JS 动态插入 <option></option> 后直接设 option.selected = true，但该元素尚未挂载到 <select></select> 中，DOM 树未建立父子关系，赋值无效。
jQuery动态填充时
这是 jQuery 特有陷阱：用字符串构造 <option selected></option> 再传入属性对象，会触发内部解析冲突，text 和 value 被丢弃，只留下空节点。现象是下拉框里能看到高亮项，但文字显示为空白。
- ❌ 错误写法：
$("<option selected>", { value: "us", text: "United States" })</option> - ✅ 正确写法：
$("<option>", { value: "us", text: "United States", selected: true })</option> - 批量填充时，统一用属性对象，避免混用 HTML 字符串和键值对
React/Vue中写selected属性完全没用
框架水合（hydrate）阶段会强制用组件状态覆盖 HTML 的初始结构。selected 属性只在纯 HTML 场景生效；一旦用了 value 或 v-model，它就变成“装饰性注释”。你看到的默认选中，100% 来自状态初始化是否匹配某个 option.value。
- React 必须确保
useState("us")的初始值与某个<option value="us"></option>完全一致（包括空格、大小写、类型） - Vue 中异步加载选项后，不能先渲染空
<select></select>，否则v-model绑定值找不到匹配项，会回退到空字符串 - 调试时别看 Elements 面板里有没有
selected，要看 React DevTools 的 props 或 Vue DevTools 的响应式数据是否对齐
移动端和旧浏览器里disabled+selected组合要慎用
规范明确禁止 disabled 和 selected 共存：disabled 的 <option></option> 不参与选择逻辑，其 selected 属性会被浏览器忽略。旧版 Safari 可能连初始渲染都不显示该选项，iOS Safari 点击提示项还会意外触发 change 事件。
- 正确做法：
<option value="" disabled>请选择</option>+ 后续一个非disabled的<option value="us" selected></option> - 提交前必须校验
select.value !== ""，不能依赖disabled阻止提交 - 如果要用 JS 控制提示项状态，优先设
select.value = ""并手动派发input事件，而非操作option.selected
selected 属性本身。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
