optgroup 必须直接嵌套在 select 内，否则静默失效；常见错误包括放于 div/form 中、空 label、JS 错误插入、非法子元素；多选时 optgroup 不影响 multiple 但 selectedOptions 不含分组信息；移动端 Safari 渲染 label 不可靠，关键信息需写入 option 文本；空提示项必须为 select 首子元素，不可置于 optgroup 内。
optgroup 必须直接嵌套在 select 内，否则整个分组静默失效
浏览器只认 <select><optgroup><option></option></optgroup></select> 这一种合法结构。把 <optgroup></optgroup> 放在 <div>、<code><form></form> 或其他容器里，它会被直接忽略——不报错、不警告、也不渲染 label，里面的 <option></option> 却可能意外出现在下拉列表里，造成语义断裂和可访问性问题。
常见错误场景：
- 模板引擎中写
{% if group %}<optgroup label="{{ group.name }}"></optgroup>{% endif %}，但group.name为空字符串 → 生成<optgroup label=""></optgroup>，等同于无分组 - JS 动态插入时用
select.appendChild(optgroup)→ 报DOMException，必须改用select.add(optgroup) - 误将
<optgroup></optgroup>当作通用容器，在里面塞<span></span>或按钮 → 浏览器丢弃非法子节点，只剩裸<option></option>
多选场景下 optgroup 不影响 multiple 属性，但会干扰 selectedOptions 遍历逻辑
multiple 是布尔属性，加了就启用多选，<optgroup></optgroup> 对它完全透明。但 JS 读取选中值时，select.selectedOptions 只返回 <option></option> 元素，不暴露所属 <optgroup></optgroup> —— 如果你需要按组聚合结果（比如“前端技术组选了几个”），得自己查 option.parentNode，并小心处理 parentNode 是 <select></select>（无分组）的情况。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 用
select.value读多选值 → 永远只拿到第一个选中项，其余被丢弃 - 遍历
select.children时没过滤文本节点，导致childNodes中混入换行或空格文本节点 - 给
<optgroup disabled></optgroup>加了禁用，却期望它从selectedOptions中消失 → 实际上只要选项曾被选中，它仍在列表里，只是 UI 灰显
移动端 Safari 对 optgroup 的 label 渲染不可靠，关键信息不能只依赖分组标题
iOS Safari 和部分 Android 原生浏览器会跳过 <optgroup label="..."></optgroup> 的渲染，只显示 <option></option> 文本。这意味着如果你把城市名全放在 <optgroup label="华东"></optgroup> 下，而 <option></option> 里只写“上海”“杭州”，用户在 iPhone 上根本看不到“华东”这个分类提示。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
实操建议：
- 所有关键筛选信息（如地域、类型）必须出现在
<option></option>的文本开头，例如：<option value="sh">华东-上海</option> - 避免用 Unicode 缩进（如 ● 或 ）模拟层级 —— Safari 可能截断或不渲染这些字符
- 若必须强依赖分组语义，放弃原生
<select multiple></select>，改用<div> + JS 实现的多选组件（如 Choices.js）<h3>空提示项（如“-- 请选择 --”）绝不能塞进 optgroup 里</h3> <p>空提示项是用户首次看到的默认选项，必须作为 <code><select></select>的第一个子元素，且要带value=""、selected和disabled。一旦把它放进某个<optgroup></optgroup>，它就会被折叠在该分组内部，用户点开下拉框第一眼看不到，甚至可能因分组默认收起而永远找不到。正确结构示例：
<select name="category" required> <option value="" selected disabled>-- 请选择分类 --</option> <optgroup label="前端"> <option value="html">HTML</option> </optgroup> <optgroup label="后端"> <option value="python">Python</option> </optgroup> </select>注意：
<optgroup></optgroup>自身没有value，设了也无效；表单提交时，只有<option></option>的value会被发送。
