---
title: <optgroup>
slug: Web/HTML/Element/optgroup
tags:
  - HTML
  - HTML表单
  - 元素
  - 参考
  - 表单
translation_of: Web/HTML/Element/optgroup
---
<p>{{HTMLRef}}</p>

<p><strong>HTML元素 <code>&lt;optgroup&gt;</code> </strong>为{{HTMLElement("select")}} 元素中的选项创建分组。</p>

<p>{{EmbedInteractiveExample("pages/tabbed/optgroup.html", "tabbed-standard")}}</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></th>
   <td>无</td>
  </tr>
  <tr>
   <th scope="row">允许的内容</th>
   <td>0或多个 {{HTMLElement("option")}} 元素</td>
  </tr>
  <tr>
   <th scope="row">标签省略</th>
   <td>开始标签是必须的。当该元素后面也跟着一个 <span style="font-family: courier new;">&lt;optgroup&gt; </span>元素，或该元素的父元素没有其他内容时，结束标签可省略。</td>
  </tr>
  <tr>
   <th scope="row">允许的父元素</th>
   <td>一个 {{HTMLElement("select")}} 元素.</td>
  </tr>
  <tr>
   <th scope="row">Implicit ARIA role</th>
   <td>{{ARIARole("group")}}</td>
  </tr>
  <tr>
   <th scope="row">Permitted ARIA roles</th>
   <td>No <code>role</code> permitted</td>
  </tr>
  <tr>
   <th scope="row">DOM 接口</th>
   <td>{{domxref("HTMLOptGroupElement")}}</td>
  </tr>
 </tbody>
</table>

<p>{{Note("Optgroup elements may not be nested.")}}</p>

<h2 id="属性">属性</h2>

<p><span style="line-height: 21px;">这个元素包含 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">。</span></p>

<dl>
 <dt>{{htmlattrdef("disabled")}}</dt>
 <dd>如果设置了这个布尔值，则不能选择这个选项组中的任何选项。通常浏览器会置灰这样的控件，它不接受任何浏览器事件，如鼠标点击或者焦点相关的事件。</dd>
 <dt>{{htmlattrdef("label")}}</dt>
 <dd>选项组的名字，浏览器用以在用户界面中标记选项。使用这个元素时必须加上这个属性。</dd>
</dl>

<h2 id="示例">示例</h2>

<pre class="brush: html">&lt;select&gt;
  &lt;optgroup label="Group 1"&gt;
    &lt;option&gt;Option 1.1&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Group 2"&gt;
    &lt;option&gt;Option 2.1&lt;/option&gt;
    &lt;option&gt;Option 2.2&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Group 3" disabled&gt;
    &lt;option&gt;Option 3.1&lt;/option&gt;
    &lt;option&gt;Option 3.2&lt;/option&gt;
    &lt;option&gt;Option 3.3&lt;/option&gt;
  &lt;/optgroup&gt;
&lt;/select&gt;
</pre>

<h3 id="结果">结果</h3>

<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/optgroup$samples/Example?revision=1617230"></iframe></p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">注释</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-optgroup-element', '&lt;optgroup&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '&lt;optgroup&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;optgroup&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>

<p>{{Compat("html.elements.optgroup")}}</p>

<div id="compat-desktop"></div>

<div id="compat-mobile"></div>

<h2 id="另请参阅">另请参阅</h2>

<ul>
 <li>其他表单相关的元素：{{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("option")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} 和 {{HTMLElement("meter")}}。</li>
</ul>