selected属性仅在HTML解析时生效，是布尔属性且不可赋值，多选时仅首项有效，禁用项设selected无效，SSR和框架中需特别注意状态一致性。
selected属性只在页面加载时起作用
它不是运行时开关，也不是 JS 能随时“触发”的状态。浏览器解析 HTML 时遇到 selected，就把对应 <option> 加入初始选中集合；一旦 DOM 构建完成，这个属性就不再参与控制逻辑。
常见错误现象包括：
- HTML 里写了
<option value="sh" selected>上海</option>，但 JS 在DOMContentLoaded里又执行了select.value = "bj"，结果默认还是北京 - Vue/React 中绑定了受控值，
selected完全被忽略，连调试都看不出问题 - 服务端渲染（SSR）没输出
selected，客户端水合后报 mismatch 错误，界面闪动
selected是布尔属性，别加等号或值
selected 是 HTML5 规范定义的布尔属性，写上即真，不写即假。它不需要、也不应该带任何值。
这些写法都是错的：
立即学习“前端免费学习笔记（深入）”；
<option value="sh" selected="true">上海</option><option value="sh" selected="selected">上海</option><option value="sh" selected="">上海</option>
正确写法只有一种：<option value="sh" selected>上海</option>。多一个字符都是冗余，部分校验工具会警告，某些老旧解析器甚至可能误判。
多个option同时设selected，浏览器只认第一个
HTML 规范明确：当多个 <option> 带 selected，浏览器仅将第一个视为有效，默认选中它，其余忽略。这不是兼容性差异，而是所有现代浏览器统一行为。
更麻烦的是 JS 层面的影响：
-
select.selectedIndex永远是 0（第一个带selected的索引） -
select.selectedOptions.length永远是 1，即使 DOM 上有多个selected属性 - 用 JS 遍历
option.selected === true会得到多个true，但界面和表单提交值只反映第一个
所以务必确保：服务端/模板生成时，只给且仅给一个 <option> 加 selected。
disabled 的 option 加 selected 没效果
给禁用项加 selected，视觉上不会高亮，大多数浏览器也不会把它当作“已选中”处理——表单提交时该字段值仍为空，select.value 读出来也是空字符串或 undefined（取决于是否还有其他非禁用选项）。
典型误用场景：<option value="" selected disabled>请选择</option> —— 看似稳妥，实则首次加载时下拉框可能不显示默认提示，且部分旧版 Safari 会忽略这个选中意图。
推荐写法：<option value="" disabled hidden selected>请选择</option>，其中 hidden 防止它出现在展开列表中，disabled 阻止用户选中它。
selected 属性必须由服务端输出，否则客户端水合时状态不一致；还有 React/Vue 中硬写 selected 属性却指望它生效——它只会被框架覆盖，毫无意义。 
