selected属性仅在HTML解析时生效，用于指定初始选中项；页面加载后，其不再影响选中状态，须通过select.value或selectedIndex动态控制。
selected属性只在HTML解析时起作用，不是JS运行时开关
页面加载完成后，selected 属性就失去控制力了。它只是告诉浏览器“初始该选谁”，之后你用 JS 改 select.value 或 select.selectedIndex，DOM 上的 selected 属性可能还留着，但界面和表单提交值完全不认它。
常见误判场景：
- Vue/React 里绑定了
v-model或valueprop，selected被彻底忽略，连 DevTools 都看不出异常 - 服务端渲染（SSR）没输出
selected，客户端水合时 mismatch，控制台报错、界面闪动 - JS 在
DOMContentLoaded里执行了select.value = "xxx"，结果覆盖了 HTML 里的默认选中
动态插入 HTML 后 selected 不生效？先确认 DOM 是否真挂载完成
用 .html() 或 .append() 插入含 selected 的 <option></option> 后立刻调 form.render()（Layui）或期望它自动生效，大概率失败——因为插入操作是异步的，DOM 可能还没真正就位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保插入后等一个微任务：
setTimeout(() => { /* 渲染或赋值 */ }, 0)或Promise.resolve().then(...) - Layui 场景下，别全量
form.render()，改用form.render('select', 'my-filter')精准刷新指定区域 - 避免嵌套
<form></form>：动态插入完整<form></form>标签会被浏览器自动截断，内部<option selected></option>直接丢失 - 只插入片段，如
<select><option selected>...</option></select>，且父容器必须有class="layui-form"
jQuery 操作 selected 时用 .prop()，别用 .attr()
想用 JS 动态设某个 <option></option> 为选中项，写 $("option[value='x']").attr("selected", true) 是错的——它只改 DOM 属性，不触发浏览器选择逻辑，多次操作后界面不更新。
正确做法：
- 用
.prop("selected", true)：直接操作 property，反映真实选中状态 - 更推荐
selectEl.value = "x"：简洁、跨浏览器稳定、无视 disabled 状态干扰 - 禁用项加
selected无效：哪怕 DOM 上显示selected=""，浏览器也不会让它成为实际选中项；调试时检查select.selectedOptions，它永远只返回未disabled的选项
Firefox 下 select 默认不生效？加 autocomplete="off"
某些 Firefox 版本会因自动填充功能覆盖 HTML 的 selected 行为，导致首次加载时默认选项空白或错乱。
解决方式很简单：
- 给
<select></select>标签加上autocomplete="off" - 注意：
selected是布尔属性，只写selected就行，别写selected="true"或selected="selected"，这些都违反 HTML5 规范 - 多个
<option></option>同时写selected，浏览器只认第一个，其余被忽略——服务端/模板生成时务必只给一个加
最常被忽略的点：selected 和 disabled 同时存在时，selected 彻底失效，且这个行为是所有现代浏览器统一遵守的规范，不是 bug。想实现“占位提示+默认选中”，得用一个 disabled 无 value 的 <option></option> 放最前，再确保后续有至少一个可用选项。
