selected属性仅在HTML首次解析时生效，后续JS修改无效；disabled选项上设selected被浏览器忽略；框架动态插入需调用render；autocomplete="off"可缓解浏览器自动填充干扰。
selected属性只在HTML首次解析时生效
页面加载后，selected 属性就不再起作用——它不是响应式开关，也不是JS可随时“激活”的状态。浏览器只在初始HTML解析阶段读取它，之后无论你用JS改 option.selected = true 还是手动加 selected 属性，界面和表单提交值都不会变。
常见误判场景：
- 服务端渲染（SSR）没输出
selected，客户端水合时 mismatch，控制台报错、界面闪动 - Vue/React 中用了受控组件，
selected被完全忽略，连调试都看不出问题 - JS 在
DOMContentLoaded里执行了select.value = "xxx"，结果覆盖了 HTML 里的selected，但开发者以为“应该以HTML为准”
动态插入的select必须重新render（Layui等框架）
用 .html()、.append() 或 AJAX 插入带 selected 的 <option> 后，Layui、EasyUI 等 UI 框架不会自动识别新 DOM，导致样式不生效、选中态丢失、change 事件不触发。
关键动作不是“加 selected”，而是让框架重新扫描：
立即学习“前端免费学习笔记（深入）”；
- 确保已通过
layui.use(['form'], function(){})正确加载模块，别只引入layui.js - DOM 插入完成后再调用
form.render('select', 'your-filter')，'your-filter'必须匹配目标<select lay-filter="your-filter"> - 避免全量
form.render()，否则会清掉已选中的值和绑定的事件 - 如果插入的是完整
<form>，注意浏览器会自动截断嵌套<form>，建议只插<select>片段，并确保父容器有class="layui-form"
disabled + selected 组合根本无效
这是最常被忽略的规范陷阱：disabled 的 <option> 不参与选择逻辑，selected 属性会被浏览器直接忽略——即使你写了 <option value="" selected disabled>请选择</option>，下拉框首次加载也大概率显示为空白，而不是显示“请选择”文字。
正确做法是：
- 把占位文本做成一个
disabled且无value的<option>，放在最前面：<option disabled value="">请选择类型</option> - 确保后续至少有一个未
disabled的<option>带有效value，否则表单提交时该字段为空 - 想默认选中某项？别碰
disabled的选项，直接给那个非禁用项加selected，或用 JS 设置select.value = "valid-value" - 调试时检查
select.selectedOptions，它只返回未disabled的选中项——哪怕你手动设了option.selected = true，它也不会出现在这个列表里
浏览器兼容性坑：autocomplete="off"有时真有用
Firefox 和部分旧版 Chrome 会对 <select> 启用自动填充逻辑，干扰 selected 的初始渲染——尤其当用户之前在这个域名下选过值，浏览器可能强行覆盖你写的 selected。
临时缓解方案（非万能但实测有效）：
- 在
<select>标签上加autocomplete="off"，例如：<select autocomplete="off"><option value="en" selected>EN</option></select> - 这不是标准解法，但对 Firefox 尤其管用；现代浏览器大多已弱化该行为，但内部系统或政企项目仍可能遇到
- 不要滥用：每个
<select>都加autocomplete="off"可能影响无障碍访问，仅在确认是自动填充干扰时启用
真正难处理的从来不是怎么写 selected，而是它什么时候“算数”——取决于 HTML 是否由服务端输出、是否被框架接管、是否被浏览器自动干预、以及有没有和 disabled 错误地绑在一起。排查顺序建议：先看源码里有没有且仅有一个 selected，再确认 DOM 加载时机，最后查框架是否漏了 render 或用了禁用项占位。
