files/zh-cn/web/html/element/optgroup/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

---
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="Examples">示例</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>{{EmbedLiveSample("Examples")}}</p>

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

<p>{{Specifications}}</p>

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

<p>{{Compat}}</p>

<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>