必须在多个<option>标签上显式写selected，且<select>必须带multiple属性，否则浏览器只当单选处理；漏掉multiple或误用selected="true"等写法均会导致初始化失败。
多选列表框（select multiple）怎么初始化多个默认选项
必须在多个 <option> 标签上显式写 selected，且 <select> 元素必须带 multiple 属性，否则浏览器只当单选处理。
常见错误是漏掉 multiple，或误以为写一个 selected 就能“自动多选”。实际上：没有 multiple，哪怕写了十个 selected，也只高亮第一个；有 multiple 但没写任何 selected，则初始无选中项。
-
<select multiple><option value="a" selected>A</option><option value="b" selected>B</option></select>→ A 和 B 都默认选中 -
<select><option value="a" selected>A</option><option value="b" selected>B</option></select>→ 只有 A 被选中（单选模式） - 表单提交时，只收集当前
selected状态为true的<option>，和 HTML 中是否写了selected属性无关
selected 属性在多选场景下为什么有时不生效
最常踩的坑是 DOM 加载后被 JS 覆盖。比如页面加载完，脚本执行了 select.value = "x" 或 select.selectedIndex = 0 —— 这两个操作都会强制重置选中状态，把多选变成单选。
尤其注意：select.value 只能设一个值，设完就清空其他所有选中；select.selectedIndex 是单值索引，无法表达多选意图。
立即学习“前端免费学习笔记（深入）”；
- 动态初始化多选，请遍历
select.options，逐个设option.selected = true - 如果用框架（React/Vue），HTML 的
selected属性完全无效，必须通过受控值（如 React 的valueprop）传入数组（如["a", "b"]） - 服务端渲染（SSR）时，必须确保输出的 HTML 中已包含正确的
selected，否则客户端水合会报 mismatch 错误
批量设置多选初始状态的 JS 写法
不要用 select.value，也不要只改 selectedIndex。正确做法是直接操作每个 <option> 的 selected 属性。
示例：让 value 为 "dev" 和 "test" 的两项默认选中
const select = document.querySelector('select[name="roles"]');
Array.from(select.options).forEach(opt => {
opt.selected = ["dev", "test"].includes(opt.value);
});
注意点：
- 必须等
<select>已挂载到 DOM 再执行，否则options是空的 - 设完后如需触发
change事件（比如校验逻辑），得手动派发：select.dispatchEvent(new Event('change', { bubbles: true })) - 避免用
setAttribute('selected', '')—— 这会污染 HTML 属性，影响后续初始化逻辑
为什么 selected 是布尔属性，不能写 selected="true"
HTML5 规范明确 selected 是布尔属性，只认“存在即真”，写任何值都是冗余甚至有害的。
这些写法都错：
<option value="a" selected="true">A</option><option value="a" selected="selected">A</option><option value="a" selected="">A</option>
唯一正确写法：<option value="a" selected>A</option>。多一个字符都不必要，部分 Linter 会警告，老旧解析器可能出错。
更隐蔽的问题是：多个 <option> 都写了 selected，浏览器仍只按顺序选第一个——但这对多选列表框来说，意味着你本想初始化多个，结果只生效了一个，还很难排查。
