用selected属性最可靠，只需在标签中添加selected即可实现默认高亮，无需js且兼容所有现代浏览器；注意不能写成selected="true"或放在上，同一中仅允许一个selected。
直接用 selected 属性最可靠
页面加载时让某个 <option></option> 默认高亮，只用在它上面加 selected 就行——这是 HTML 原生、零 JS、兼容所有现代浏览器（包括 IE9+）的标准做法。
常见错误是写成 selected="true" 或 selected="selected"，其实只要 selected 这个词存在就生效，多写反而冗余；也别把它放在 <select></select> 标签上，它只对 <option></option> 有效。
- 同一
<select></select>中只能有一个selected，否则浏览器只认第一个，DOM 语义已不合法 - 如果想设“-- 请选择 --”为占位项，不要加
selected，否则它会真被提交（value 为空时可能绕过required验证） -
selected和disabled不能共存于同一个<option></option>：视觉上不会高亮，且该值无法提交
select.value = "xxx" 动态设置要注意匹配精度
当选项由 JS 生成、或需根据 URL 参数/本地存储恢复上次选择时，得用脚本控制。用 select.value 赋值比操作索引更直观，但要求右侧字符串必须和某个 <option value="xxx"></option> 的 value 属性**完全一致**——包括大小写、空格、甚至不可见字符。
如果没匹配到任何 option，select.value 会变成空字符串，界面却毫无反应，容易误以为“代码没执行”。
- 赋值前务必确认
<select></select>已挂载到 DOM，脚本放里常因执行过早而失效 - 想触发绑定的
change监听器（比如校验逻辑），得手动派发事件：select.dispatchEvent(new Event('change', { bubbles: true })) - 避免用
select.selectedIndex = n：选项增删后索引偏移，极易出错；仅适合位置绝对固定的静态场景
React 中 selected 属性完全无效
React 的 <select></select> 是受控组件，它的显示状态 100% 由 value prop 决定，HTML 的 selected 属性会被 React 忽略。如果你写了 selected 却发现默认值不显示，问题一定出在 state 初始化或 options 渲染时机上。
- 初始化
useState时，值必须严格等于某个<option value="xxx"></option>的字符串值；设成''或undefined会导致下拉框空白（除非真有value=""的项） - 异步加载 options 时，千万别在 options 还是空数组时就渲染
<select value="{value}"></select>，React 会卡在“无匹配项”状态 - 推荐用条件渲染控制
<select></select>出现时机，比如{options.length > 0 && <select value="{value}" onchange="{...}">...</select>}
表单重置时 selected 是唯一可信依据
用户点 <button type="reset"></button> 后，<select></select> 会回到初始状态——这个“初始状态”不是 JS 设置过的值，而是 HTML 中哪个 <option selected></option> 被声明了。这点常被忽略，导致重置后 UI 和逻辑脱节。
例如你用 JS 把 select.value 设为 "us"，但 HTML 里 <option value="US" selected></option>（大小写不一致），重置后选中的其实是 "US"，而非你 JS 里设的 "us"。
所以，静态 HTML 的 selected 不仅是默认值起点，更是整个表单重置行为的锚点。动态场景下若需自定义重置逻辑，要么同步更新 HTML 的 selected 属性（不推荐），要么拦截 reset 事件并手动还原 JS 状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
