直接在目标<option>上写selected属性即可实现加载时立即显示指定选项，不闪不延迟；React/Vue中需用value或v-model控制，默认值必须与option的value严格匹配。
怎么让 select 加载时就显示指定选项，不闪、不延迟
直接在目标 <option> 上写 selected 属性，而不是靠 JS 赋值。否则页面首次渲染会先显示第一个选项，再跳转——尤其 SSR 或静态页里，用户一眼就能看出“闪一下”。
-
selected是布尔属性，写成selected就够了，selected=""或selected="selected"都冗余 - 必须确保只有一个
<option selected>，多个时浏览器只认第一个，但 HTML 结构已不合法 - 如果默认项是空提示（如
-- 请选择 --），建议同时加disabled和hidden：<option value="" disabled hidden selected>-- 请选择 --</option> - 服务端模板（如 PHP、Jinja）中，应把
selected属性和对应value一起动态注入，而非靠客户端 JS 补救
selected 属性在 React/Vue 里为什么不起作用
因为 React 的 <select> 是受控组件，它的选中状态完全由 value prop 决定；Vue 同理，由 v-model 控制。你在 JSX 或 Vue 模板里给 <option> 写 selected，框架会忽略它，甚至报 warning。
- React 正确做法：初始化
useState时设为你要的默认值，比如const [value, setValue] = useState('banana')，且确保这个值严格匹配某个<option value="banana"> - Vue 正确做法：绑定
v-model到响应式变量，该变量初始值即为默认选中项的value - 常见坑：异步加载
options时，先渲染了<select value={value}>，但options还是空数组——结果下拉框空白，不是没默认值，而是没选项可匹配 - 解决思路：用条件渲染控制
<select>出现时机，比如{options.length > 0 && <select ...>}
JS 动态设置默认值时，select.value 和 select.selectedIndex 怎么选
优先用 select.value，除非你明确需要按位置强制选中（比如后端只返回索引）。前者语义清晰、容错好；后者脆弱，选项顺序一变就失效。
-
select.value = 'us'：自动匹配value相等的<option>，匹配失败时select.value变成空字符串，界面无变化 -
select.selectedIndex = 2：不管value是什么，第 3 个选项（索引从 0 开始）一定被高亮，哪怕它的value是""或null - 务必确认
<select>已挂载到 DOM，脚本放在<head>里常导致操作无效 - 如果要触发
change事件（比如联动校验），得手动派发：select.dispatchEvent(new Event('change', { bubbles: true }))
为什么设置了 selected 却没生效
最常见原因是框架覆盖或 DOM 尚未就绪，而不是 HTML 写错了。
立即学习“前端免费学习笔记（深入）”；
- 检查是否在 React/Vue 中混用了原生
selected和受控逻辑——两者不能共存 - 查看浏览器开发者工具 Elements 面板，确认最终渲染出的
<option>确实带selected属性，且没有被 JS 清掉 - 验证
value类型是否一致：JS 里设select.value = 1，但<option value="1">是字符串，能匹配；若写成<option value=" 1 ">（含空格），则匹配失败 - 注意
disabled和selected不能同时出现在同一个<option>上，否则视觉上不会高亮，提交时也不包含该值
实际项目里，最易被忽略的是「默认值来源」和「渲染时机」的配合——HTML 原生 selected 保证首屏正确，框架层的 value 或 v-model 保证后续交互一致，二者缺一不可。
