直接在上加selected属性即可设初始选中项，无需赋值；多个selected仅第一个生效；selected与disabled不可共存；js动态插入或框架中需手动设置或用状态控制；多选需multiple属性且可多个selected。

直接在 <option></option> 上加 selected 属性就行

浏览器解析 HTML 时，只要看到某个 <option></option> 标签里有 selected 这个布尔属性（哪怕不写值），就会把它设为初始选中项。不需要 selected="true"，也不需要 selected="selected"——那都是冗余写法。

常见错误是给多个 <option></option> 都加了 selected：浏览器只认第一个，其余被忽略，且 DOM 已不符合规范。另外，selected 和 disabled 不能共存于同一个 <option></option>，否则它既不会高亮，也无法提交值。

selected 不起作用？先查这三件事

写了 selected 却没生效，大概率不是语法问题，而是被其他逻辑覆盖了：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• JS 脚本在 DOM 加载后立刻执行了 select.value = "xxx" 或 select.selectedIndex = n，直接覆盖了 HTML 声明的初始状态
• <select></select> 是动态插入 DOM 的（比如用 document.createElement 拼完再 append），此时 HTML 中的 selected 属性不会自动生效，得手动设 option.selected = true
• 用了 React/Vue 等框架：selected 属性完全被忽略，必须通过组件状态控制（React 看 value prop，Vue 看 v-model 绑定的数组或字符串）

多选下拉框（multiple）怎么设多个默认项

和单选一样，还是靠 selected 属性，但规则不同：多个 <option></option> 可以同时带 selected，浏览器会全部高亮。前提是 <select></select> 必须有 multiple 属性，否则只生效第一个。

注意：框架中依然无效。React 的 <select multiple></select> 需绑定数组状态；Vue 的 v-model 也得是数组，且每个 value 必须严格匹配对应 <option value="xxx"></option> 的字符串值（包括空格、大小写、JSON 转义等）。

JavaScript 动态设置时，value 和 selectedIndex 怎么选

运行时改默认选中，别再去操作 selected 属性字符串——该属性只影响初始渲染，不响应式更新 UI。

• 用 select.value = "us"：语义清晰，自动滚动并高亮匹配的 <option value="us"></option>；但如果 value 不完全一致（比如多了空格、大小写错），就静默失败，select.value 变成空字符串，界面无变化
• 用 select.selectedIndex = 2：快、确定，但选项顺序一变就失效；哪怕第 2 个 <option></option> 的 value 是空或非法，也会被强行选中
• 无论哪种，设置前必须确认 <select></select> 已挂载到 DOM；如需触发监听函数（比如校验），得手动派发 change 事件：select.dispatchEvent(new Event('change', { bubbles: true }))

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！