在 中让某些 默认选中，直接在对应 标签添加 selected 布尔属性即可，多个选项可同时设置，无需 javascript；但需确保 有 multiple 属性，且在 react/vue 等框架中该属性会被忽略，须通过状态控制。
如何让 <select multiple></select> 中的某些 <option></option> 默认选中
直接在需要默认选中的 <option></option> 标签上添加 selected 属性即可。浏览器会自动识别并高亮这些选项，用户打开页面时就能看到它们已被勾选。
注意：不需要 JavaScript，纯 HTML 就能生效；selected 是布尔属性，写成 selected 或 selected="selected" 效果一样，推荐简写。
-
<select multiple></select>必须存在，否则多选无效（单选<select></select>里加selected只会生效第一个） - 多个
<option></option>可同时带selected，没有数量限制 - 如果服务端返回的初始数据里包含预选值，需确保 HTML 渲染时对应
<option value="xxx"></option>确实带有selected
为什么加了 selected 却没生效
常见原因不是语法错，而是 DOM 加载或框架覆盖导致的“视觉失效”：
- React/Vue 等框架中，若用
v-model或value控制<select></select>，HTML 的selected会被忽略——必须通过组件状态（如数组）设置初始值 - 页面动态插入
<select></select>后再补selected属性，但未触发浏览器重绘（此时应改用element.selected = true） -
<option></option>的value和你认为“该选中”的值不一致（比如空格、大小写、JSON 字符串未转义） - 浏览器缓存了上次用户手动选择的结果，覆盖了 HTML 的
selected（可加autocomplete="off"缓解）
selected 和 JavaScript 的 selected 属性有什么区别
HTML 属性 selected 决定初始状态；JS 的 option.selected 是可读写的 DOM 属性，用于运行时控制。
示例：
<option value="a" selected>A</option>页面加载后，
document.querySelector('option[value="a"]').selected === true；但执行 option.selected = false 不会移除 HTML 中的 selected 属性，只改变当前选中状态。
- 修改 HTML 属性（
option.setAttribute('selected', '')）会影响后续初始化逻辑，慎用 - 批量操作建议直接设
select.value（单选）或遍历select.options设.selected（多选） - 表单提交时，只按当前
.selected状态收集值，和 HTML 中是否写了selected无关
服务端渲染时如何安全输出预选的 <option selected></option>
关键不是拼字符串，而是确保 value 严格匹配且内容被正确转义：
- PHP 示例：
<option value="<?= htmlspecialchars($val) ?>" in_array :>>= htmlspecialchars($label) ?></option> - Node.js 模板中避免直接插值
value="{{val}}"，防止 XSS；优先用模板引擎的自动转义机制 - 如果预选值来自数据库，注意 NULL/空字符串/空白字符是否被当作有效选项处理
- 调试时右键查看源码，确认生成的 HTML 确实含
selected，而非被模板逻辑意外跳过
真实项目里最常出问题的，是前后端对“空值是否可选中”的约定不一致，比如后端传 null，前端却拿 "" 去比对 value。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
