html原生分组唯一合规方式是，必须直接嵌套在内、设label属性、不可选不可提交；动态添加须用select.add()；多选需遍历options获取全部选中值。

必须用 <optgroup></optgroup>，别用 div 或 class 模拟

HTML 原生唯一合规、语义正确且读屏软件可识别的分组方式，就是 <optgroup></optgroup>。它不是装饰容器，而是表单规范的一部分——浏览器靠它理解逻辑层级，辅助技术靠它播报“‘前端技术’组，包含 HTML、CSS……”。

常见翻车点：

• 把 <optgroup></optgroup> 套在 <div> 里，或放在 <code><select></select> 外面 → 浏览器忽略或报错
• 漏写 label 属性 → 分组标题不显示，<optgroup></optgroup> 变成空壳
• 给 <optgroup></optgroup> 加 value 或设 selected → 完全无效，它本身不可选、不提交
• 在 <optgroup></optgroup> 里塞 <span></span> 或按钮 → 破坏语义结构，部分浏览器直接丢弃子节点

<optgroup></optgroup> 动态插入必须用 select.add()

JS 创建分组后，不能用 appendChild() 往 <select></select> 里加，Chrome 会抛 DOMException: Failed to execute 'appendChild' on 'Node'；Firefox 可能静默失败。

正确姿势：

• 先 const optgroup = document.createElement('optgroup')
• 再 optgroup.label = '后端语言'（必须赋值，否则 label 不生效）
• 然后往 optgroup 里用 appendChild() 加 <option></option>（这步没问题）
• 最后调用 selectElement.add(optgroup) 插入到 select 中

注意：如果 <select></select> 还没渲染进 DOM，add() 会失败但不报错；确保操作前元素已挂载。


Html To Pdf
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
下载

分组内“全选”得靠 JS 拦截，不能靠普通 <option></option>

<optgroup></optgroup> 本身不提供交互能力，“全选本组”不是原生功能。想实现，得避开两个坑：

• 别把 <option value="all">✓ 全选本组</option> 直接塞进 <optgroup></optgroup> → 语义错误，部分浏览器不渲染，且用户真点了会选中这个伪选项，污染 value
• 别用 disabled option + CSS 模拟后监听 click → 必须显式 event.preventDefault()，否则点击后仍可能触发默认选中行为（尤其 Safari）

推荐做法：在每组上方放一个独立 <button data-group="frontend">全选前端</button>，点击时遍历对应 <optgroup label="前端技术"></optgroup> 下所有 <option></option>，设 option.selected = true。

多选场景下，select.value 不可靠，得遍历 options

当 <select multiple></select> 里有分组时，select.value 只返回**第一个**被选中的值，不是全部；想拿到所有选中项，必须手动遍历：

const selectedValues = Array.from(select.options)
  .filter(opt => opt.selected)
  .map(opt => opt.value);

另外注意：

• JS 设置 select.value = 'python' 仅对单选有效；多选时它只会选中匹配的第一个，其余不变
• 用 select.selectedIndex 也只反映首个选中项索引，无法代表多选状态
• 提交时，多选的 value 以逗号拼接（如 fruits=apple,banana），后端需按此解析，不是数组格式

分组本身不影响选中逻辑，但会让 DOM 结构变深——遍历时记得跳过 <optgroup></optgroup> 节点，只处理 <option></option>。