html中用selected属性可预设多选初始选中项，但仅限初始渲染；运行时需用selectedoptions获取全部选中值，避免使用value；移动端原生multiple不可靠，应改用checkbox或专用库。
直接用 selected 属性预设选中项，但仅限初始渲染
HTML 中 <select multiple></select> 的“全部选中”不是运行时指令，而是初始状态声明。想让某些 <option></option> 加载即被选中，就在对应标签上加 selected 属性：<option value="a" selected>A</option>。浏览器解析到这个属性，就会把该项加入初始选中集合。
注意点：
-
selected是布尔属性，写成selected或selected="selected"效果一样，推荐简写 - 多个
<option></option>可同时带selected，没有数量限制 - 服务端渲染时，必须确保
value字符串完全一致（空格、大小写、JSON 转义都要对） - 如果用了 React/Vue，HTML 的
selected会被框架状态覆盖——此时得靠组件的value或v-model数组控制
select.selectedOptions 才是读取当前全部选中值的唯一可靠方式
别碰 select.value。它在多选场景下永远只返回第一个选中项的 value 字符串，其余全丢。这是最常踩的坑，后端收不到数组就以为前端漏逻辑，其实是前端根本没取全。
正确做法是用 select.selectedOptions：
const select = document.getElementById('my-select');
const values = Array.from(select.selectedOptions).map(opt => opt.value);
说明：
-
selectedOptions是实时 DOM 集合，只包含此刻真正被选中的<option></option>元素 - IE11 不支持，需回退到遍历
select.options并检查opt.selected - jQuery 的
$('select :selected').val()同样只返回第一个，慎用
移动端根本不能依赖 multiple 实现真多选
iOS Safari 直接忽略 multiple 和 size，点开就是单选弹窗；安卓 Chrome 表现也不稳定，有些机型无法取消已选项。这不是 bug，是平台限制。
如果你的业务必须支持移动端多选：
- 优先用
<input type="checkbox">组合 + CSS 模拟展开/收起 - 或引入
Choices.js、tom-select这类库，它们根本不渲染原生select，而是接管 DOM - 若坚持用原生，至少在外层加提示文字：“PC 端按 Ctrl/Cmd 多选”，避免用户困惑
为什么写了 selected 却没生效？常见失效原因
不是语法错，而是环境干扰导致“视觉失效”：
- React/Vue 中用
v-model或value控制select，HTML 的selected会被忽略 - 动态插入
<select></select>后再补selected属性，但未触发浏览器重绘——此时应改用option.selected = true -
<option value="xxx"></option>的value和你认为“该选中”的值不一致（比如前后有空格、大小写不同、JSON 字符串未转义） - 浏览器缓存了上次用户手动选择的结果，覆盖了 HTML 的
selected（可加autocomplete="off"缓解）
最易被忽略的是：你写了 <select multiple size="5"></select>，在 iOS 上测试时一切正常——因为根本没触发多选逻辑，它压根没走那套渲染路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
