HTML原生select不支持全选，但可通过optgroup实现分组并结合JavaScript实现分组内及跨组全选控制；optgroup提供语义化分组，其label渲染为灰色标题，内部option不可直接选中；“全选本组”宜用disabled option模拟或独立按钮触发JS逻辑；总控开关需遍历所有可选项统一设置selected属性并同步状态。
HTML 原生的 <select> 标签本身不支持“全选”功能，也不直接提供分组内的全选逻辑——但可以通过 <optgroup> 实现视觉分组，并结合 JavaScript 实现分组内全选/取消全选，以及跨组全选控制。
用 <optgroup> 实现分组结构
这是 HTML 标准方式，用于语义化地对选项进行分类。每个 <optgroup> 有 label 属性，浏览器会渲染为灰色标题，其内部的 <option> 不可被直接选中（仅作分组标识）。
示例：
<select multiple id="categorySelect"><optgroup label="前端技术">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</optgroup>
<optgroup label="后端语言">
<option value="python">Python</option>
<option value="java">Java</option>
</optgroup>
</select>
为每组添加“全选”选项（伪选项）
不能把“全选”写成普通 <option> 并放在 <optgroup> 里（语义错误且部分浏览器不渲染），推荐两种稳妥做法：
立即学习“前端免费学习笔记（深入）”；
-
在每组上方加一个独立的“全选本组”按钮：用
<button>或带 data-group 的标签，绑定点击事件批量操作对应组内的<option> -
用 disabled + 样式模拟“全选项”：在每组开头插入一个
<option disabled value="">✓ 全选本组</option>，再通过 JS 拦截其点击，触发对应组选择逻辑（注意：需阻止默认选中行为）
JavaScript 控制分组全选逻辑
核心是获取当前 <optgroup> 下所有可选项，统一设置 selected 属性。关键点：
- 用
select.querySelectorAll('optgroup')遍历分组 - 每个
<optgroup>的.children包含其下所有<option>（跳过文本节点） - 监听点击事件时，区分是点击了“全选项”还是普通选项，避免误触发
- 建议给每个
<optgroup>添加data-group-id，便于精准匹配控制按钮和目标组
实现“全部全选 / 全部取消”总控开关
额外加一个顶部的“全选所有”复选框或按钮：
- 勾选时：遍历所有
<option>（排除disabled和optgroup标题），设selected = true - 取消时：同理设
selected = false - 同步更新各分组“全选项”的状态（比如用 CSS 类标记“已全选”）
- 注意：不要影响
<optgroup label>自身，它们不是可选项
