不可选、不提交数据，仅为视觉分组容器，必须嵌套在内且带label属性；其内仅可交互，禁用或选中无效，禁止嵌套，label需简洁规范。
<optgroup></optgroup> 标签本身不可选、不提交数据，只是视觉分组容器；它必须嵌套在 <select></select> 内，且必须带 label 属性——漏掉这个属性，浏览器会忽略整个分组。
为什么 <optgroup></optgroup> 里的选项点不动或没反应
常见错误是把 <optgroup></optgroup> 当成可交互元素：它没有 value、不能加 selected、也不响应点击。用户实际能操作的只有里面的 <option></option>。
- 检查是否误给
<optgroup label="华东"></optgroup>加了disabled或selected—— 这些属性对它无效，且部分浏览器可能因此跳过渲染内部<option></option> - 确认每个
<option></option>都写在<optgroup></optgroup>开始与结束标签之间，而不是紧贴<select></select>写在外部 - 如果分组标题显示为普通选项（可点、可提交），大概率是漏写了
<optgroup></optgroup>标签，只写了<option></option>并把“华东地区”当作了选项文本
<optgroup></optgroup> 的 label 值怎么写才安全
label 是纯展示用的字符串，不参与表单提交，但会影响可访问性和样式继承。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 避免空格开头/结尾，或全为空格——某些旧版浏览器会渲染异常甚至隐藏整组
- 不要用 HTML 实体（如
<optgroup label="<span>华北</span>"></optgroup>会被当作字面量显示，不是渲染为 HTML - 移动端 Safari 和 Android Chrome 通常会弱化显示
label文本（比如灰色、斜体），但不会读屏；如需更好支持，得靠额外 ARIA 属性补充
多级分组或嵌套 <optgroup></optgroup> 行不行
不行。HTML 规范明确禁止 <optgroup></optgroup> 嵌套，也不能包含除 <option></option> 以外的任何标签。
立即学习“前端免费学习笔记（深入）”；
- 像
<optgroup label="省"><optgroup label="市"><option>杭州</option></optgroup></optgroup>这种结构，第二个<optgroup></optgroup>会被浏览器直接丢弃 - 如果真需要两层逻辑（如“华东 → 上海 → 浦东”），只能扁平化处理：用统一前缀（
上海-浦东）、或改用 JS 渲染的虚拟下拉（如 Select2、Choices.js） - 注意：多个同级
<optgroup></optgroup>是允许的，但它们之间不能有其他元素（比如注释或空格节点）干扰 DOM 结构
最容易被忽略的是：哪怕 <optgroup></optgroup> 正确写了，只要父 <select></select> 被设了 disabled，整组都会变灰不可用——但这时你没法靠样式单独启用其中某个 <option></option>，因为禁用作用于整个控件层级。
