直接在目标标签中添加selected布尔属性即可默认选中，仅允许一个选项拥有该属性，浏览器加载时自动生效；多个时仅首个被选中，无selected则默认选首项。

如何让 <option></option> 默认被选中（不是靠 JS 模拟）

直接在 HTML 中设置 selected 属性即可生效，浏览器会自动将该 <option></option> 作为初始选中项。注意：这是静态属性，不是布尔值表达式，写上就代表“是”，不写就是“否”。

• selected 是布尔属性，写 selected、selected=""、selected="selected" 效果完全一样
• 一个 <select></select> 中只能有一个 <option></option> 带 selected，否则浏览器只认第一个
• 如果所有 <option></option> 都没写 selected，则默认选中第一个（但这是隐式行为，不推荐依赖）
• 服务端渲染时，应由后端逻辑决定哪个 <option></option> 渲染 selected，而非前端补救

selected 和 value 不一致时会发生什么

选中状态只取决于 selected 属性是否存在，和 <select></select> 的 value 属性无关。但 JS 读取 select.value 时，会返回当前选中项的 value（或文本内容，若无 value 属性）。

AGI-Eval

AGI-Eval是一款AI模型评测工具，AI 大模型评测社区。

下载

• 若 <option value="a">A</option> 带 selected，则 select.value === "a"
• 若 <option>B</option>（无 value）带 selected，则 select.value === "B"
• <select value="x"></select> 中的 value 属性会被忽略——<select></select> 元素本身没有可设置的 value 属性（HTML 规范中它只读）

用 JS 动态设置默认选中项的常见错误

不要用 option.setAttribute('selected', true) 或 option.selected = true 后再插入 DOM；如果 <select></select> 已挂载，这样操作可能不触发 UI 更新或表单序列化行为。

• 最稳妥方式：直接修改 select.selectedIndex，例如 select.selectedIndex = 2
• 或设置 select.value = "xxx"，前提是存在对应 value 的 <option></option>
• 避免在循环中反复设 option.selected = false/true，性能差且易出错
• 使用 new Option(text, value, defaultSelected, selected) 构造时，第 3 个参数 defaultSelected 控制的是 selected 属性是否写入 HTML，仅对新创建的 <option></option> 有效

React/Vue 等框架里为什么 selected 属性经常失效

因为这些框架通常接管了表单控件的状态，把 <select></select> 当作受控组件处理。此时 HTML 的 selected 属性会被忽略，必须通过组件 state 控制 value。

• React 中：用 value prop + onChange 处理，不要手动加 selected
• Vue 中：用 v-model 或 :value + @change，同理
• 若需服务端首次渲染匹配（如 SSR），应在服务端传入与 v-model 或 value 一致的初始值，而不是靠 selected 属性“骗过”框架

浏览器不会校验多个 selected，也不会报错，但实际只认第一个。这个细节常被忽略，尤其在模板拼接或循环渲染时容易多写。