html原生无全选功能，须用js遍历options按值、文本或class精准设置selected属性，并手动触发change事件。
点击按钮触发 select 多选全选逻辑
HTML 原生 <select multiple></select> 不自带“全选”功能，必须用 JS 手动设置每个 <option></option> 的 selected 属性。关键不是“一键”，而是“准确控制哪些项被选中”——你要先明确“特定项”的判断条件，比如值匹配、文本包含、或带某个 class。
常见错误是直接给所有 option 设 selected = true，结果把不该选的也勾了；或者用 select.value 赋值，但只对单选有效，多选时无效。
- 用
select.options遍历，逐个比对option.value或option.text - 避免用
select.selectedIndex，它只返回第一个选中项索引，不适用于多选判定 - 如果下拉框是动态生成的（如通过 AJAX 加载），确保 JS 在 DOM 渲染完成后执行
按值列表批量选中 option
最常用场景：用户点击按钮，选中值为 ["apple", "banana", "cherry"] 的所有选项。不能靠 select.value = "apple"，因为那是单值赋值；必须遍历并设 option.selected = true。
document.getElementById('mySelect').options.forEach(opt => {
if (["apple", "banana", "cherry"].includes(opt.value)) {
opt.selected = true;
}
});
-
opt.selected = true是唯一可靠方式，opt.setAttribute('selected', '')在某些浏览器中不会实时更新 UI - 注意大小写和空格：
"Apple"≠"apple"，必要时用opt.value.toLowerCase() - 如果值含特殊字符（如空格、斜杠），确保数组里写的值和
option.value完全一致
用 CSS 类标记“特定项”再选中
当“特定项”由样式或语义决定（比如后台打标、用户自定义分组），在 HTML 中给目标 <option></option> 加 class 更灵活：
<option value="user-123" class="important">张三</option><option value="user-456">李四</option><option value="user-789" class="important">王五</option>
JS 可这样筛选：
Array.from(select.options)
.filter(opt => opt.classList.contains('important'))
.forEach(opt => opt.selected = true);
-
select.options是HTMLOptionsCollection，不是 Array，所以要用Array.from()或[...select.options]转换才能用filter - 不要用
select.querySelectorAll('.important')，<option></option>不支持 querySelector 在<select></select>内部直接查 class - class 名别用
selected这类语义冲突名，容易和原生行为混淆
选中后触发 change 事件以便监听
手动设 option.selected = true 不会自动触发 change 事件，如果下游逻辑（如表单校验、联动刷新）依赖该事件，得手动 dispatch：
const select = document.getElementById('mySelect');
// ...执行选中逻辑
select.dispatchEvent(new Event('change', { bubbles: true }));
- 漏掉这步是常见坑：UI 看起来选上了，但绑定的
select.addEventListener('change', ...)完全没响应 -
{ bubbles: true }确保事件能冒泡到父级，尤其在 Shadow DOM 或封装组件中很重要 - 不要用
select.onchange()，这是函数调用，不是事件触发，且无法传递 event 对象
真正麻烦的不是怎么选，而是怎么定义“特定项”——值？文本？属性？还是服务端返回的 ID 列表？一旦规则变，JS 就得跟着改，而且得和后端约定好字段含义。别指望一个按钮解决所有场景，先理清“特定”到底指什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
