selected 属性本身即生效，无需赋值；同一 select 中只能有一个 selected option，否则仅首个生效且 dom 非法；disabled 与 selected 不能共存，disabled 选项的 selected 会被忽略。
直接写 selected 就生效，别赋值也别多写
浏览器只认 selected 这个布尔属性本身，写成 selected="true" 或 selected="selected" 都是冗余的——不报错，但语义混乱，还可能被某些模板引擎或 linter 误判。
同一 <select></select> 中只能有一个 <option selected></option>，否则浏览器只选中第一个，DOM 已不合法，后续 JS 脚本（比如读取 select.selectedOptions）会出错。
-
<option value="us" selected>美国</option>✅ 正确 -
<option value="us" selected>美国</option>⚠️ 冗余，不推荐 -
<option value="us" selected></option> <option value="cn" selected></option>❌ 多个selected，仅首个生效，且结构非法
selected 和 disabled 不能共存
这是最容易踩的坑：哪怕你写了 <option disabled selected>请选择</option>，浏览器也会忽略 selected，下拉框初始状态为空或默认选中下一个可用项。
规范明确要求：disabled 的 <option></option> 不参与选择逻辑，selected 在此完全失效。
- 想实现“占位提示 + 不可选”，用：
<option value="" disabled>请选择国家</option>，再确保后面至少一个未disabled的<option></option>带有效value - 所有
<option></option>都disabled？表单提交时该字段无值，多数浏览器渲染为空白 - 调试时检查
select.selectedOptions，它永远只返回未disabled的选中项，哪怕你手动设了option.selected = true
JavaScript 动态设置默认选中：用 value，别碰 selectedIndex
脚本里改默认值，优先用 select.value = "xxx"。它自动滚动、高亮、触发 UI 更新；而 select.selectedIndex = n 是按位置硬塞，选项增删后极易错位。
但要注意：select.value 必须严格匹配某个 <option value="xxx"></option> 的字符串值（包括空格、大小写、类型），否则赋值无效，select.value 变为空字符串，界面毫无反应。
- 确保
<select></select>已挂载到 DOM，脚本放在里或document.createElement后立即操作会失败 - 需要触发监听函数（如校验、联动）？手动派发：
select.dispatchEvent(new Event('change', { bubbles: true })) - 用
select.options[i].selected = true也能设，但不如select.value安全直观
React 里 selected 属性完全没用
React 的 <select></select> 是受控组件，它的显示状态 100% 由 value prop 决定。HTML 层写的 selected 属性会被 React 忽略，连初始化都无效。
必须用 useState 管理状态，并把 value 绑定到 <select></select> 上，再通过 onChange 同步更新。
- 如果默认值不显示，先检查传给
value的字符串是否和某个<option value="xxx"></option>的值**完全一致**（注意空格、引号包裹、类型） - 服务端渲染时，不要拼 HTML 字符串输出
selected，而是确保 React 的初始valuestate 和选项列表对齐 - 别在
<option></option>上写selected，纯属干扰项
selected 属性只在页面首次加载时起作用，一旦 JS 或框架接管，它就彻底退场；而 disabled 对 selected 的压制是硬性的、不可绕过的规范行为。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
