autocomplete="off"可解决Firefox下selected失效问题，因Firefox会用历史数据覆盖selected属性；该属性对Chrome、Safari影响小，但对Firefox是刚需，且必须为"off"而非"false"。
autocomplete="off" 能解决 Firefox 下 selected 失效
Firefox 会基于历史表单数据覆盖 HTML 中的 selected 属性，导致第一个 <option selected> 看似写了却没被选中。这不是 bug，而是浏览器自动填充行为的副作用。
直接在 <select> 标签上加 autocomplete="off" 即可禁用该行为：
<select autocomplete="off"> <option value="us">美国</option> <option value="cn" selected>中国</option> </select>
这个属性对 Chrome、Safari 影响极小，但对 Firefox 是刚需。别写成 autocomplete="false"——只有 "off" 是标准值。
多个 selected 属性只认第一个，且不能和 disabled 共存
HTML 规范明确要求：同一 <select> 中多个 selected 属性时，仅第一个生效；若 selected 和 disabled 同时出现在一个 <option> 上，selected 被忽略——该选项既不会高亮，也不会被提交。
立即学习“前端免费学习笔记（深入）”；
常见错误写法：
<option value="" selected disabled>请选择</option>
正确替代方案（视觉占位 + 语义清晰）：
-
<option value="" disabled hidden>请选择</option>——hidden让它不出现在下拉列表中，disabled防止用户点选 - 再跟一个真实可选项：
<option value="1">选项一</option>
注意：如果所有 <option> 都 disabled，<select> 将无有效值可提交，多数浏览器渲染为空白。
JS 动态设置选中项，别用 attr，要用 prop 或 value
jQuery 里用 .attr("selected", true) 只改 HTML 属性，不触发 DOM 状态更新，多次操作后容易失效；应改用 .prop("selected", true) 直接操作 DOM 属性。
更推荐原生方式，兼容性更强、逻辑更可控：
- 按值选中：
selectElement.value = "cn"—— 自动匹配value，找不到则清空显示 - 按索引选中：
selectElement.selectedIndex = 1—— 强制选第 2 个，不管value是什么 - 动态插入
<option>后，必须手动设value或selectedIndex，HTML 的selected属性对 JS 创建的节点无效
如果要触发 change 事件（比如联动校验），记得补一句：selectElement.dispatchEvent(new Event('change', { bubbles: true }))。
React/Vue 等框架里 selected 完全无效
框架把 <select> 当作受控组件处理，selected 属性会被忽略。显示状态 100% 由绑定的变量（如 React 的 value prop）决定。
典型问题：
- 初始化
useState('')，但 options 里没有value=""的项 → 下拉框空白 - 异步加载 options 后没同步更新
value→ 仍显示旧值或空 - 写了
<option selected>但value不匹配 → 视觉上没变化
关键检查点：
确保 value 的字符串值严格等于某个 <option value="xxx"> 的 value 字符串（注意空格、大小写、类型）。哪怕后端返回的是数字 1，也要转成字符串 "1" 再赋给 value。
