selected是唯一可靠且语义正确的设置方式，为布尔属性，存在即生效；其他写法无效或错位；react/vue中selected属性完全失效，须用受控组件控制。
selected 是唯一可靠、语义正确且浏览器原生支持的设置方式，其他写法（如 default、required、value 放在 select 上）均无效或用途错位。
直接写 selected 就生效，别赋值也别多写
它是个布尔属性，存在即生效：<option value="us" selected>美国</option> ✅。写成 selected="true"、selected="" 或 selected="selected" 都是冗余的——不报错，但增加维护成本，还可能被模板引擎误解析（比如渲染出 selected="0"，结果仍被当成 true）。
常见错误：
- 多个
<option></option>都加了selected：浏览器只认第一个，但 DOM 已非法，select.selectedOptions会返回空数组或异常 - 给
<option disabled></option>同时加selected：规范明确禁止，该selected被完全忽略，初始状态为空或跳过 - 把
selected写在<select></select>标签上：<select selected></select>—— 无意义，浏览器无视
“请选择”提示项必须禁用 + 空值 + 不带 selected
想让下拉框一打开就显示“-- 请选择 --”，又不让用户提交这个空值，不能靠 selected 实现。正确写法是：
<option value="" disabled>-- 请选择 --</option>
然后确保其后至少一个 <option></option> 带有效 value 并加 selected。例如：
<select name="role"><option value="" disabled>-- 请选择角色 --</option> <option value="admin" selected>管理员</option> <option value="user">普通用户</option></select>
这样既满足视觉占位，又避免空值提交；disabled 的 <option></option> 不会出现在表单序列化结果中，后端收不到该字段。
JS 动态设置默认值：优先用 select.value = "xxx"，不是 selectedIndex
脚本里改默认值，select.value = "xxx" 比 select.selectedIndex = n 更安全直观：
-
select.value = "xxx"自动滚动到对应项、高亮、更新 UI，且兼容性好 -
select.selectedIndex = 1是按位置硬塞，一旦选项顺序变动（比如服务端动态插入新项），极易错位选中错误项 - 但
select.value必须严格匹配某个<option value="xxx"></option>的字符串值（包括大小写、空格、类型），否则赋值失败，select.value变为空字符串，界面无反应 - 必须等
<select></select>已挂载到 DOM 后再执行，否则报Cannot set property 'value' of null - 赋值后不会自动触发
change事件，需手动派发：select.dispatchEvent(new Event('change', { bubbles: true }))
React/Vue 中 selected 属性完全失效
框架里 <select></select> 是受控组件，它的显示状态 100% 由绑定的 state 或 prop 决定。HTML 中写的 selected 属性会被框架忽略，形同虚设。
例如 React 中必须这样写：
const [value, setValue] = useState('admin');
// ...
<select value="{value}" onchange="{(e)"> setValue(e.target.value)}>
<option value="">-- 请选择 --</option>
<option value="admin">管理员</option></select>
初始值由 useState('admin') 控制，不是靠 <option selected></option>。这点极易被忽略，尤其在从纯 HTML 迁移代码时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
