optgroup 不支持嵌套，浏览器会忽略内层 optgroup，仅渲染外层结构；原生 select 最多支持一级分组，实现多级需用 JS 库或自定义树形选择器。

optgroup 嵌套不被支持，别试了<optgroup> 标签在 HTML 规范中**不允许嵌套**，浏览器会直接忽略内部的 <optgroup>，只渲染外层结构。你写成这样：

<select>
  <optgroup label="前端">
    <optgroup label="框架">
      <option>React</option>
      <option>Vue</option>
    </optgroup>
  </optgroup>
</select>

实际效果等同于：

<select>
  <optgroup label="前端">
    <option>React</option>
    <option>Vue</option>
  </optgroup>
</select>

所有子分组信息都会丢失。

想实现多级菜单，得换方案 原生 <select> + <optgroup> 最多只支持一级分组（即“大类 → 选项”）。要实现“领域 → 类别 → 具体项”这种三层结构，必须脱离原生下拉控件：

• 使用 JavaScript 库（如 Select2、Choices.js、Tom Select）配合自定义数据结构
• 或用纯 HTML/CSS/JS 实现弹出式树形选择器（div + ul + 层级展开逻辑）
• 后端返回扁平化带层级标识的数据（例如 { value: 'vue-core', label: 'Vue', group: ['前端', '框架', '核心'] }），前端按需渲染

注意：这些方案不再依赖 <optgroup>，而是靠 JS 控制显示逻辑和选中状态。

Wechat HTML Publisher

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

下载

optgroup 的正确用法和常见坑 它只适合简单的一级分类场景，比如国家/地区按洲分组、编程语言按范式分组：

• label 属性必须存在，且不能为空字符串或仅空格
• <optgroup> 内只能放 <option>，不能放 <optgroup>、<hr> 或其他标签
• 所有 <option> 必须有 value（哪怕为空字符串），否则提交时可能丢失值
• iOS Safari 对 <optgroup> 的样式支持有限，禁用状态（disabled）在部分安卓 WebView 中不生效
• 不要用 <optgroup> 来“视觉分隔”，它语义是“可折叠分类”，不是装饰性分隔线

如果非要“模拟”多级，至少让结构可读 虽然不能嵌套，但可以用命名约定让一级分组名体现层级关系，方便用户理解：

<select>
  <optgroup label="前端 / 框架">
    <option value="react">React</option>
    <option value="vue">Vue</option>
  </optgroup>
  <optgroup label="前端 / 构建工具">
    <option value="webpack">Webpack</option>
    <option value="vite">Vite</option>
  </optgroup>
</select>

这种写法不增加复杂度，兼容性最好，但前提是用户能接受斜杠作为层级提示 —— 实际项目中，这往往是权衡之后最务实的选择。

立即学习“前端免费学习笔记（深入）”；

真实多级选择需求一旦出现，说明业务维度已经超出了 <select> 的设计边界，该换组件了。