用 selected 属性可直接设置下拉框默认选项，只需在目标 option 标签中添加 selected（布尔属性，无需赋值），且仅允许一个选项拥有该属性；JavaScript 中通过 select.value 或 select.selectedIndex 动态设置；React 中需用 value prop 和 useState 控制受控组件。
怎样用 selected 属性设置下拉框默认选项
直接在 <option> 标签里加 selected 属性即可，浏览器会自动把带这个属性的选项设为初始选中项。注意：selected 是布尔属性，写上就生效，不需要赋值（selected="true" 或 selected="selected" 都是冗余写法）。
常见错误是多个 <option> 都加了 selected —— 浏览器只会选中第一个，但语义混乱，也容易被后续 JS 脚本误判。
- 只给一个
<option>加selected - 如果后端动态渲染，确保服务端只对预期项输出该属性
-
selected不能用于禁用项（disabled），否则视觉上不显示为选中
<select name="country"> <option value="">请选择国家</option> <option value="cn">中国</option> <option value="us" selected>美国</option> <option value="jp">日本</option> </select>
用 JavaScript 动态设置默认选中项
当选项由 JS 动态生成、或需根据 URL 参数/本地存储恢复上次选择时，得用 JS 控制 select.value 或 select.selectedIndex。
关键区别：
– select.value = "us" 更直观，但要求 value 值必须完全匹配（包括空格、大小写）；
– select.selectedIndex = 2 按索引操作，适合已知位置的场景，但选项增删后易出错。
- 设置前确保
<select>已挂载到 DOM，否则赋值无效 - 若用
value设置但没匹配到任何<option>，select.value会变为空字符串，且界面无变化 - 触发
change事件需手动调用select.dispatchEvent(new Event('change'))
const select = document.querySelector('select[name="country"]');
select.value = 'jp'; // 自动滚动并高亮对应 option
// 若想触发监听函数：
select.dispatchEvent(new Event('change', { bubbles: true }));
React 中怎么控制下拉框默认值
React 的 <select> 是受控组件，不能靠 selected 属性，必须用 value prop 绑定状态，并通过 onChange 同步更新。
立即学习“前端免费学习笔记（深入）”；
初始值由 state 决定，所以重点是初始化 state —— 不要依赖 DOM 属性，否则 React 会警告“a component is changing an uncontrolled input to be controlled”。
- 初始化 state 时就设好默认值，比如
useState('us') - 不要混用
defaultValue和value；受控组件只认value - 如果选项异步加载，初始 state 设为
null或空字符串，等数据就绪再更新
function CountrySelect() {
const [value, setValue] = useState('us'); // 初始值在这里定
return (
<select value={value} onChange={(e) => setValue(e.target.value)}>
<option value="cn">中国</option>
<option value="us">美国</option>
<option value="jp">日本</option>
</select>
);
}
为什么设置了 selected 却没生效？常见排查点
最常被忽略的是：HTML 解析顺序和 JS 执行时机冲突。比如你在 <head> 里写了 JS 脚本，试图修改刚声明的 <select>，但此时 DOM 还没解析完，querySelector 返回 null。
- 检查浏览器开发者工具 Elements 面板，确认
selected属性是否真的出现在目标<option>上 - 如果用了框架（Vue/React/Angular），确认没用指令覆盖了原生行为（如 Vue 的
v-model会接管） - 某些 CMS 或模板引擎（如 Django 模板）会把
selected渲染成字符串，比如selected="{{ is_us }}"，结果变成selected="False"，这在 HTML 中仍是真值，导致意外选中 - 移动端 WebView 或旧版 Safari 对
selected的解析有细微差异，建议优先用 JS 方式兜底
selected 最省事；动态场景务必统一用 JS 或框架状态管理。别指望“既写 selected 又用 JS 设置”能叠加效果——后者会立刻覆盖前者。 
