HTML中optgroup下拉分组 HTML中optgroup标签层级显示-html教程-PHP中文网

optgroup 必须直接嵌套在 select 中且不可嵌套，仅支持单层结构；其 label 不可点击、禁用无效、样式控制受限；内部 option 可单独 disabled，屏幕阅读器会播报分组名以提升无障碍体验。

html中optgroup下拉分组 html中optgroup标签层级显示

optgroup 必须直接放在 select 里面，不能嵌套在其他 optgroup 或 option 中

浏览器会忽略非法嵌套——比如把 <optgroup></optgroup> 放进另一个 <optgroup></optgroup> 里，或者插在 <option></option> 中间。解析时这些错位标签会被自动“拍平”或丢弃，导致分组失效、文字乱序甚至整个下拉变空。

正确层级只有一层： <select></select> → （<optgroup></optgroup> 或 <option></option>）→ <option></option>。没有“二级分组”这种东西。

<optgroup label="前端"><optgroup label="框架"><option>Vue</option></optgroup></optgroup> —— ❌ 无效，内层 <optgroup></optgroup> 被忽略
<select><option>普通项</option> <optgroup label="分组"><option>组内项</option></optgroup></select> —— ✅ 合法，但注意：普通 <option></option> 和 <optgroup></optgroup> 是同级，顺序会影响渲染位置

optgroup 的 label 不可点击、不可选中，且无法通过 CSS 修改禁用态样式

<optgroup></optgroup> 本身不是选项，只是视觉分隔符。它的 label 文字默认置灰、加粗、缩进，但这是浏览器 UA 样式硬编码的，disabled 属性对它无效，:disabled 伪类也选不到它。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

想自定义外观？只能靠 JS 模拟分组（比如用 <div> + <code><ul></ul>），原生 <optgroup></optgroup> 的样式控制粒度极低。

<optgroup label="后端" disabled></optgroup> —— ❌ disabled 属性被忽略，分组仍可见可展开
optgroup[label="后端"] { color: red; } —— ⚠️ 部分浏览器支持，但非标准，Chrome/Firefox 表现不一致，不建议依赖
真正禁用某一分组？得 JS 拦截 change 事件并校验 select.value 是否属于该分组下的 option

optgroup 内的 option 无法设置 disabled，但父 optgroup disabled 不影响子项

<optgroup disabled></optgroup> 不会禁用它里面的 <option></option>，这点非常反直觉。浏览器只把它当视觉提示，子 <option></option> 依然能被选中——除非你单独给每个 <option></option> 加 disabled。

反过来，如果只想禁用其中几个选项，直接加 disabled 到对应 <option></option> 即可，<optgroup></optgroup> 完全不影响。

<optgroup disabled><option value="py">Python</option></optgroup> —— ❌ Python 仍可选
<optgroup label="数据库"> <option value="mysql" disabled>MySQL</option> <option value="pg">PostgreSQL</option> </optgroup> —— ✅ 只有 MySQL 灰掉不可选
注意：禁用的 <option></option> 在表单提交时不会被发送，哪怕它在某个 <optgroup></optgroup> 里

optgroup 在屏幕阅读器中的播报逻辑容易被忽略

主流读屏软件（NVDA、VoiceOver）会读出 <optgroup label></optgroup>，并在进入该分组时播报一次，之后每读一个 <option></option> 会连带报出分组名，例如：“语言组，JavaScript”、“语言组，TypeScript”。这对无障碍很重要，但也意味着 label 文本必须简洁准确。