HTML元素selected属性在动态渲染后不生效如何排查

selected属性仅在HTML解析时生效，用于指定初始选中项；页面加载后，其不再影响选中状态，须通过select.value或selectedIndex动态控制。

selected属性只在HTML解析时起作用，不是JS运行时开关

页面加载完成后，selected 属性就失去控制力了。它只是告诉浏览器“初始该选谁”，之后你用 JS 改 select.value 或 select.selectedIndex，DOM 上的 selected 属性可能还留着，但界面和表单提交值完全不认它。

常见误判场景：

1. Vue/React 里绑定了 v-model 或 value prop，selected 被彻底忽略，连 DevTools 都看不出异常
2. 服务端渲染（SSR）没输出 selected，客户端水合时 mismatch，控制台报错、界面闪动
3. JS 在 DOMContentLoaded 里执行了 select.value = "xxx"，结果覆盖了 HTML 里的默认选中

动态插入 HTML 后 selected 不生效？先确认 DOM 是否真挂载完成

用 .html() 或 .append() 插入含 selected 的 <option> 后立刻调 form.render()（Layui）或期望它自动生效，大概率失败——因为插入操作是异步的，DOM 可能还没真正就位。

实操建议：

1. 确保插入后等一个微任务：setTimeout(() => { /* 渲染或赋值 */ }, 0) 或 Promise.resolve().then(...)
2. Layui 场景下，别全量 form.render()，改用 form.render('select', 'my-filter') 精准刷新指定区域
3. 避免嵌套 <form>：动态插入完整 <form> 标签会被浏览器自动截断，内部 <option selected> 直接丢失
4. 只插入片段，如 <select><option selected>...，且父容器必须有 class="layui-form"

jQuery 操作 selected 时用 .prop()，别用 .attr()

想用 JS 动态设某个 <option> 为选中项，写 $("option[value='x']").attr("selected", true) 是错的——它只改 DOM 属性，不触发浏览器选择逻辑，多次操作后界面不更新。

正确做法：

1. 用 .prop("selected", true)：直接操作 property，反映真实选中状态
2. 更推荐 selectEl.value = "x"：简洁、跨浏览器稳定、无视 disabled 状态干扰
3. 禁用项加 selected 无效：哪怕 DOM 上显示 selected=""，浏览器也不会让它成为实际选中项；调试时检查 select.selectedOptions，它永远只返回未 disabled 的选项

Firefox 下 select 默认不生效？加 autocomplete="off"

某些 Firefox 版本会因自动填充功能覆盖 HTML 的 selected 行为，导致首次加载时默认选项空白或错乱。

解决方式很简单：

1. 给 <select> 标签加上 autocomplete="off"
2. 注意：selected 是布尔属性，只写 selected 就行，别写 selected="true" 或 selected="selected"，这些都违反 HTML5 规范
3. 多个 <option> 同时写 selected，浏览器只认第一个，其余被忽略——服务端/模板生成时务必只给一个加

最常被忽略的点：selected 和 disabled 同时存在时，selected 彻底失效，且这个行为是所有现代浏览器统一遵守的规范，不是 bug。想实现“占位提示+默认选中”，得用一个 disabled 无 value 的 <option> 放最前，再确保后续有至少一个可用选项。