optgroup必须嵌套在select内且只含option，label必填并渲染为灰色不可选标题，disabled仅禁用选项不隐藏label，无value属性，不影响表单提交，键盘导航跳过分组标题。

optgroup 不能单独存在，必须嵌套在 内，且内部只能放 —— 这是绝大多数人第一次用就报错的根本原因。

optgroup 必须配合 select 和 option 使用

浏览器会直接忽略孤立的 ，甚至可能让整个下拉框渲染失败。它不是容器组件，只是语义分组标签。

• 是唯一合法父元素，没有例外
• 内部不能嵌套 （不支持多级分组）
• 每个 至少要包含一个 ，否则视觉上可能“消失”或被跳过
• label 属性必须存在，否则分组标题不显示（且部分旧版 Safari 会报解析警告）

label 属性值会被渲染为灰色禁用标题

所有主流浏览器都把 label 渲染成不可选、不可聚焦的灰色文字，但它的样式无法通过 CSS 直接修改 color 或 font-weight（原生控件限制）。

• 不要试图给 加 class 或 style —— 大部分样式会被忽略
• 如果需要自定义分组样式（比如加图标、改字体），必须放弃原生 ，改用 JS 模拟下拉（如 Select2、Choices.js）
• label 值支持空格和中文，但避免使用特殊字符如 >，否则需 HTML 实体转义

disabled 属性只禁用整个分组的选项，不隐藏 label

给 加上 disabled，里面所有 都变灰不可选，但分组标题仍可见 —— 这常被误认为“没生效”。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 想彻底隐藏某一分组？只能靠 JS 动态移除该 节点，或服务端不输出
• 不要对 设置 value：它没有 value 属性，设了也无效
• 键盘导航（Tab + 方向键）会跳过分组标题，直接落到可选项上 —— 这是无障碍友好设计，不是 bug

optgroup 不影响表单提交和 JavaScript 获取值

提交时，只有被选中的 的 value 会发送；JS 读取 select.value 或遍历 select.options 时， 完全不可见。

• DOM 中 select.children 包含 节点，但 select.options 只返回 元素（这是最易混淆的点）
• 用 select.selectedOptions[0].parentNode 可反查所属分组，但要注意 parentNode 可能是 （无分组时）
• 服务端收到的永远只是字符串值，完全感知不到前端有没有用 optgroup

真正麻烦的是跨浏览器下拉高度计算和焦点管理 —— 自身不占布局空间，但它的 label 会影响鼠标 hover 区域和键盘导航顺序，这点在做高对比度模式或屏幕阅读器适配时容易漏掉。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！