当前位置:知识文库 ❯ 图文

HTML表单：HTML optgroup选项分组教程 - select下拉列表分组使用指南

教程简介

当 <select> 下拉列表中的选项数量较多时，用户往往难以快速定位到所需选项。<optgroup> 元素正是为解决这一问题而设计的，它允许开发者将相关的 <option> 元素进行逻辑分组，使下拉列表的结构更加清晰、层次分明，从而提升用户的浏览和选择效率。

本教程将详细介绍 <optgroup> 元素的使用方法，包括分组标签的设置、嵌套规则、样式控制以及与 select/option 的配合使用。

核心概念

optgroup 元素

<optgroup> 是一个容器元素，用于将 <select> 中的 <option> 元素按逻辑关系进行分组。每个分组可以通过 label 属性设置组标题，浏览器会将组标题以加粗、不可选中的方式显示在选项列表中。

核心特性

逻辑分组：将相关选项归类到同一组，提升列表可读性
组标题显示：通过 label 属性设置分组名称，以视觉分隔的方式呈现
不可选中：组标题本身不可被选中，仅作为视觉标识
禁用分组：可通过 disabled 属性一次性禁用整个分组的所有选项

分组结构示意

代码示例

select
├── optgroup (label="分组A")
│   ├── option
│   ├── option
│   └── option
├── optgroup (label="分组B")
│   ├── option
│   └── option
└── option (未分组的选项)

语法与用法

基本语法

代码示例

<select name="字段名">
  <optgroup label="分组名称1">
    <option value="值1">选项1</option>
    <option value="值2">选项2</option>
  </optgroup>
  <optgroup label="分组名称2">
    <option value="值3">选项3</option>
    <option value="值4">选项4</option>
  </optgroup>
</select>

optgroup 元素属性

属性	值类型	必填	描述
`label`	字符串	是	分组的标题文本，浏览器会将其显示为不可选中的组名
`disabled`	布尔值	否	禁用该分组下的所有选项，用户无法选择

使用规则

<optgroup> 必须作为 <select> 的直接子元素
<option> 必须作为 <optgroup> 的直接子元素
<optgroup> 不允许嵌套（不能在 optgroup 内再放 optgroup）
<select> 中可以混合使用分组选项和未分组选项
label 属性为必填属性，省略可能导致分组无标题

代码示例

示例 1：基础选项分组

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基础选项分组</title>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      max-width: 600px;
      margin: 40px auto;
      padding: 20px;
      background: #f5f7fa;
    }
    .form-group {
      margin-bottom: 24px;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: #333;
    }
    select {
      width: 100%;
      padding: 10px 12px;
      border: 2px solid #ddd;
      border-radius: 6px;
      font-size: 15px;
      background: #fff;
      cursor: pointer;
    }
    select:focus {
      outline: none;
      border-color: #4a90d9;
      box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
    }
    .result {
      margin-top: 16px;
      padding: 12px;
      background: #e8f4fd;
      border-radius: 6px;
      font-size: 14px;
      color: #2c5f8a;
    }
  </style>
</head>
<body>
  <h1>基础选项分组</h1>

  <div class="form-group">
    <label for="car">选择汽车品牌：</label>
    <select name="car" id="car">
      <optgroup label="德系品牌">
        <option value="benz">奔驰</option>
        <option value="bmw">宝马</option>
        <option value="audi">奥迪</option>
        <option value="vw">大众</option>
      </optgroup>
      <optgroup label="日系品牌">
        <option value="toyota">丰田</option>
        <option value="honda">本田</option>
        <option value="nissan">日产</option>
        <option value="mazda">马自达</option>
      </optgroup>
      <optgroup label="国产品牌">
        <option value="byd">比亚迪</option>
        <option value="geely">吉利</option>
        <option value="chery">奇瑞</option>
        <option value="greatwall">长城</option>
      </optgroup>
    </select>
    <div class="result" id="result">请选择一个品牌</div>
  </div>

  <script>
    document.getElementById('car').addEventListener('change', function() {
      const text = this.options[this.selectedIndex].text;
      document.getElementById('result').textContent = '您选择了：' + text;
    });
  </script>
</body>
</html>

示例 2：disabled 禁用分组

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>disabled 禁用分组</title>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      max-width: 600px;
      margin: 40px auto;
      padding: 20px;
      background: #f5f7fa;
    }
    .form-group {
      margin-bottom: 24px;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: #333;
    }
    select {
      width: 100%;
      padding: 10px 12px;
      border: 2px solid #ddd;
      border-radius: 6px;
      font-size: 15px;
      background: #fff;
      cursor: pointer;
    }
    select:focus {
      outline: none;
      border-color: #e74c3c;
      box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
    }
    .hint {
      margin-top: 10px;
      font-size: 13px;
      color: #888;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>disabled 禁用分组</h1>

  <div class="form-group">
    <label for="membership">选择会员等级：</label>
    <select name="membership" id="membership">
      <optgroup label="免费用户">
        <option value="free-basic">基础版</option>
        <option value="free-plus">增强版</option>
      </optgroup>
      <optgroup label="付费用户">
        <option value="paid-pro">专业版</option>
        <option value="paid-team">团队版</option>
      </optgroup>
      <optgroup label="企业用户（暂未开放）" disabled>
        <option value="enterprise-standard">企业标准版</option>
        <option value="enterprise-ultimate">企业旗舰版</option>
      </optgroup>
    </select>
    <p class="hint">
      "企业用户"分组设置了 disabled 属性，该分组下的所有选项均不可选择。<br>
      注意：disabled 分组的标题和选项会以灰色显示。
    </p>
  </div>
</body>
</html>

示例 3：混合分组与未分组选项

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>混合分组与未分组选项</title>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      max-width: 600px;
      margin: 40px auto;
      padding: 20px;
      background: #f5f7fa;
    }
    .form-group {
      margin-bottom: 24px;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: #333;
    }
    select {
      width: 100%;
      padding: 10px 12px;
      border: 2px solid #ddd;
      border-radius: 6px;
      font-size: 15px;
      background: #fff;
      cursor: pointer;
    }
    select:focus {
      outline: none;
      border-color: #27ae60;
      box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.15);
    }
    .info {
      margin-top: 16px;
      padding: 14px;
      background: #fef9e7;
      border-left: 4px solid #f39c12;
      border-radius: 4px;
      font-size: 14px;
      color: #7d6608;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>混合分组与未分组选项</h1>

  <div class="form-group">
    <label for="food">选择食物：</label>
    <select name="food" id="food">
      <option value="">-- 请选择 --</option>
      <!-- 未分组的常用选项 -->
      <option value="rice">米饭</option>
      <option value="noodles">面条</option>
      <!-- 分组选项 -->
      <optgroup label="中式菜品">
        <option value="kungpao">宫保鸡丁</option>
        <option value="mapo">麻婆豆腐</option>
        <option value="sweet-sour">糖醋排骨</option>
      </optgroup>
      <optgroup label="西式菜品">
        <option value="steak">牛排</option>
        <option value="pasta">意大利面</option>
        <option value="salad">凯撒沙拉</option>
      </optgroup>
      <optgroup label="日式菜品">
        <option value="sushi">寿司</option>
        <option value="ramen">拉面</option>
        <option value="tempura">天妇罗</option>
      </optgroup>
    </select>
    <div class="info">
      select 中可以混合使用分组选项和未分组选项。<br>
      未分组的"米饭"和"面条"直接显示在列表中，<br>
      其余选项按菜系分组显示。
    </div>
  </div>
</body>
</html>

示例 4：综合应用 - 地区与职业选择

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>optgroup 综合应用</title>
  <style>
    * { box-sizing: border-box; }
    body {
      font-family: "Microsoft YaHei", sans-serif;
      max-width: 650px;
      margin: 40px auto;
      padding: 20px;
      background: #f0f2f5;
    }
    h1 { color: #1a1a2e; }
    .card {
      background: #fff;
      padding: 28px;
      border-radius: 10px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    }
    .form-group {
      margin-bottom: 22px;
    }
    label {
      display: block;
      margin-bottom: 6px;
      font-weight: 600;
      color: #333;
      font-size: 14px;
    }
    select {
      width: 100%;
      padding: 10px 12px;
      border: 2px solid #e0e0e0;
      border-radius: 6px;
      font-size: 14px;
      background: #fff;
      cursor: pointer;
      transition: border-color 0.2s;
    }
    select:focus {
      outline: none;
      border-color: #6c5ce7;
      box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
    }
    .row {
      display: flex;
      gap: 16px;
    }
    .row .form-group { flex: 1; }
    .btn {
      padding: 12px 28px;
      background: #6c5ce7;
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 15px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .btn:hover { background: #5a4bd1; }
    .output {
      margin-top: 20px;
      padding: 16px;
      background: #f8f9fa;
      border-radius: 6px;
      font-size: 14px;
      color: #555;
      line-height: 1.8;
      display: none;
    }
  </style>
</head>
<body>
  <h1>信息登记表</h1>
  <div class="card">
    <form id="infoForm">
      <div class="row">
        <div class="form-group">
          <label for="region">所在地区：</label>
          <select name="region" id="region" required>
            <option value="">-- 选择地区 --</option>
            <optgroup label="华北地区">
              <option value="beijing">北京</option>
              <option value="tianjin">天津</option>
              <option value="hebei">河北</option>
            </optgroup>
            <optgroup label="华东地区">
              <option value="shanghai">上海</option>
              <option value="jiangsu">江苏</option>
              <option value="zhejiang">浙江</option>
            </optgroup>
            <optgroup label="华南地区">
              <option value="guangdong">广东</option>
              <option value="fujian">福建</option>
              <option value="hainan">海南</option>
            </optgroup>
            <optgroup label="西南地区">
              <option value="sichuan">四川</option>
              <option value="chongqing">重庆</option>
              <option value="yunnan">云南</option>
            </optgroup>
          </select>
        </div>
        <div class="form-group">
          <label for="occupation">职业方向：</label>
          <select name="occupation" id="occupation" required>
            <option value="">-- 选择职业 --</option>
            <optgroup label="技术类">
              <option value="frontend">前端工程师</option>
              <option value="backend">后端工程师</option>
              <option value="fullstack">全栈工程师</option>
              <option value="devops">运维工程师</option>
            </optgroup>
            <optgroup label="设计类">
              <option value="ui">UI 设计师</option>
              <option value="ux">UX 设计师</option>
              <option value="graphic">平面设计师</option>
            </optgroup>
            <optgroup label="管理类">
              <option value="pm">产品经理</option>
              <option value="project">项目经理</option>
              <option value="team-lead">技术主管</option>
            </optgroup>
            <optgroup label="其他（暂未开放）" disabled>
              <option value="intern">实习生</option>
              <option value="freelance">自由职业</option>
            </optgroup>
          </select>
        </div>
      </div>
      <button type="submit" class="btn">提交信息</button>
    </form>
    <div class="output" id="output"></div>
  </div>

  <script>
    document.getElementById('infoForm').addEventListener('submit', function(e) {
      e.preventDefault();
      const formData = new FormData(this);
      const output = document.getElementById('output');
      let html = '<strong>提交数据：</strong><br>';
      for (const [key, value] of formData.entries()) {
        html += key + ' = ' + value + '<br>';
      }
      output.innerHTML = html;
      output.style.display = 'block';
    });
  </script>
</body>
</html>

浏览器兼容性

浏览器	支持情况	备注
Chrome	完全支持	分组标题加粗显示，视觉分隔清晰
Firefox	完全支持	分组标题以斜体显示
Safari	完全支持	分组标题样式略有不同
Edge	完全支持	Chromium 内核版本完全兼容
IE 11	基本支持	功能正常，样式渲染有差异
移动端浏览器	基本支持	分组标题的显示方式因平台而异

兼容性注意事项

不同浏览器对 <optgroup> 的 label 文本渲染样式不同（加粗、斜体、颜色等）
移动端（尤其是 iOS）可能不显示分组标题，而是将选项平铺展示
disabled 属性在所有主流浏览器中均支持

注意事项与最佳实践

1. label 属性不可省略

代码示例

<!-- 正确：设置 label 属性 -->
<optgroup label="分组名称">
  <option value="1">选项1</option>
</optgroup>

<!-- 错误：缺少 label 属性，分组将无标题 -->
<optgroup>
  <option value="1">选项1</option>
</optgroup>

2. 不支持嵌套分组

代码示例

<!-- 错误：optgroup 不能嵌套 -->
<optgroup label="一级分组">
  <optgroup label="二级分组">  <!-- 无效！ -->
    <option value="1">选项</option>
  </optgroup>
</optgroup>

<!-- 正确：使用扁平化的分组结构 -->
<optgroup label="一级分类 - 子类A">
  <option value="1">选项1</option>
</optgroup>
<optgroup label="一级分类 - 子类B">
  <option value="2">选项2</option>
</optgroup>

3. 合理控制分组数量

分组数量建议不超过 5-7 个（符合认知负荷原则）
每个分组内的选项建议 3-10 个
选项过多时考虑使用搜索功能或分步选择

4. 分组命名要清晰

代码示例

<!-- 推荐：命名清晰、有逻辑 -->
<optgroup label="前端框架">
  <option value="react">React</option>
  <option value="vue">Vue</option>
</optgroup>

<!-- 不推荐：命名模糊 -->
<optgroup label="框架">
  <option value="react">React</option>
  <option value="vue">Vue</option>
</optgroup>

5. disabled 分组的使用场景

功能暂未开放时禁用整个分组
权限不足时禁用特定分组
配合提示文本说明禁用原因

代码规范示例

规范写法

代码示例

<!-- 规范：结构清晰、label 必填、缩进一致 -->
<select name="tech" id="tech" required>
  <option value="">-- 请选择技术栈 --</option>
  <optgroup label="前端技术">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="后端技术">
    <option value="node">Node.js</option>
    <option value="python">Python</option>
    <option value="java">Java</option>
  </optgroup>
</select>

不规范写法

代码示例

<!-- 不规范：缺少 label、缺少默认选项、缩进混乱 -->
<select name=tech>
<optgroup>
<option value=html>HTML
<option value=css>CSS
<optgroup label=后端>
<option value=node>Node.js
</select>

JavaScript 操作规范

代码示例

// 动态创建带分组的 select
function createGroupedSelect(data) {
  const select = document.createElement('select');
  select.name = 'category';
  select.id = 'category';

  // 添加默认选项
  const defaultOpt = new Option('-- 请选择 --', '');
  select.add(defaultOpt);

  // 遍历分组数据
  data.forEach(group => {
    const optgroup = document.createElement('optgroup');
    optgroup.label = group.label;
    if (group.disabled) {
      optgroup.disabled = true;
    }

    group.options.forEach(item => {
      const option = new Option(item.text, item.value);
      if (item.selected) {
        option.selected = true;
      }
      optgroup.appendChild(option);
    });

    select.appendChild(optgroup);
  });

  return select;
}

常见问题与解决方案

问题 1：如何实现多级分类选择？

由于 <optgroup> 不支持嵌套，多级分类需要通过其他方式实现：

代码示例

<!-- 方案一：用分隔符模拟层级 -->
<select name="category">
  <optgroup label="电子产品">
    <option value="phone">  手机</option>
    <option value="tablet">  平板</option>
    <option value="laptop">  笔记本</option>
  </optgroup>
  <optgroup label="服装">
    <option value="men">  男装</option>
    <option value="women">  女装</option>
  </optgroup>
</select>

<!-- 方案二：使用级联 select -->
<select name="category1" id="category1">
  <option value="electronics">电子产品</option>
  <option value="clothing">服装</option>
</select>
<select name="category2" id="category2">
  <!-- 根据 category1 动态加载子分类 -->
</select>

问题 2：optgroup 的样式能自定义吗？

<optgroup> 的 label 文本样式由浏览器原生渲染，CSS 无法直接控制。如需完全自定义样式，需要使用自定义下拉组件。

问题 3：如何动态禁用某个分组？

代码示例

// 通过 JavaScript 动态禁用分组
const optgroups = document.querySelectorAll('#mySelect optgroup');
optgroups.forEach(group => {
  if (group.label === '企业用户') {
    group.disabled = true;
  }
});

// 也可以动态启用
function enableGroup(labelText) {
  const optgroups = document.querySelectorAll('#mySelect optgroup');
  optgroups.forEach(group => {
    if (group.label === labelText) {
      group.disabled = false;
    }
  });
}

问题 4：移动端分组显示异常？

移动端浏览器对 <optgroup> 的支持程度不同，部分浏览器可能忽略分组标题。解决方案：

对于简单场景，接受原生渲染差异
对于复杂场景，使用自定义下拉组件
考虑使用级联选择替代分组选择

问题 5：如何获取选中选项所属的分组？

代码示例

const select = document.getElementById('mySelect');
const selectedOption = select.options[select.selectedIndex];
const parentGroup = selectedOption.parentElement;

if (parentGroup.tagName === 'OPTGROUP') {
  console.log('所属分组：', parentGroup.label);
} else {
  console.log('该选项未分组');
}

总结

<optgroup> 元素为下拉选择框提供了选项分组能力，是提升长列表可用性的重要工具：

特性	说明
分组功能	将相关选项归类，提升列表可读性
label 属性	必填属性，定义分组标题文本
disabled 属性	可一次性禁用整个分组的所有选项
嵌套限制	不支持嵌套，需要多级分类时应使用级联选择
样式限制	分组标题样式由浏览器原生渲染，CSS 控制能力有限
混合使用	可与未分组选项混合使用

在实际开发中，当 <select> 的选项超过 10 个时，建议使用 <optgroup> 进行分组。分组命名应简洁明了，体现选项的逻辑关系。对于需要多级分类或高度自定义样式的场景，应考虑使用级联选择器或自定义下拉组件作为替代方案。

常见问题

optgroup 可以嵌套使用吗？

不可以。<optgroup> 不支持嵌套，如果需要多级分类，建议使用组合 label 命名或使用级联 select。

optgroup 的 label 样式可以自定义吗？

分组标题样式由浏览器原生渲染，CSS 无法直接控制。如需完全自定义样式，需要使用自定义下拉组件。

如何在 select 中混合使用分组和未分组选项？

<select> 中可以混合放置 <optgroup> 和 <option>，未分组的选项会直接显示在列表中，分组选项则按组显示。

如何动态禁用或启用某个分组？

可以通过 JavaScript 获取 optgroup 元素，然后设置其 disabled 属性为 true 或 false。

移动端为什么看不到分组标题？

移动端浏览器（尤其是 iOS）可能将选项平铺展示而不显示分组标题。这是移动端原生渲染的差异，对于复杂场景建议使用自定义下拉组件。

标签： HTML optgroup 表单 select option 选项分组前端开发

本文涉及AI创作

内容由AI创作，请仔细甄别

list快速访问

poll相关推荐

框架集成：01 HTML与前端框架概述 - 详细教程与实战指南

实战项目：项目10：个人作品集网站 - 详细教程与实战指南

实战项目：项目09：任务管理应用 - 详细教程与实战指南

实战项目：项目08：天气应用界面 - 详细教程与实战指南

快速访问

相关推荐