HTML <optgroup> 元素

HTML <optgroup> 元素<select> 元素中创建一组选项。

通过 <optgroup> 标签把相关的选项组合在一起:

<select>
  <optgroup label="瑞典汽车">
    <option value="volvo">沃尔沃</option>
    <option value="saab">萨博</option>
  </optgroup>
  <optgroup label="德国汽车">
    <option value="mercedes">奔驰</option>
    <option value="audi">奥迪</option>
  </optgroup>
</select>

尝试一下 »

特性

内容类别 无。
允许的内容 零到多个 <option> 元素。
标签省略 必须有开始标签。如果该元素紧跟着另一个 <optgroup> 元素,或者父元素没有更多的内容,则可以忽略结束标签。
允许的父元素 <select> 元素。
允许的 ARIA 角色
DOM 接口 HTMLOptGroupElement

注意: Optgroup 元素不能嵌套。

属性

该元素包含了全局属性

disabled

如果设置该布尔属性,则该选项组中的任何项目都不可选。通常,浏览器会将这部分控件变成灰色,它不会收到任何浏览事件,如鼠标点击或与焦点有关的事件。

label

选项组的名称,浏览器会在用户界面中显示该名称。该属性是必需的。

事件属性

<optgroup> 元素支持所有 HTML事件属性

更多实例

包含被禁用的选项组

<select>
  <optgroup label="分组 1">
    <option>选项 1.1</option>
  </optgroup> 
  <optgroup label="分组 2">
    <option>选项 2.1</option>
    <option>选项 2.2</option>
  </optgroup>
  <optgroup label="分组 3" disabled>
    <option>选项 3.1</option>
    <option>选项 3.2</option>
    <option>选项 3.3</option>
  </optgroup>
</select>

尝试一下 »

规范

规范 状态 备注
HTML Living Standard
<optgroup> 的定义
现行的标准 -
HTML5
<optgroup> 的定义
推荐 -
HTML 4.01 Specification
<optgroup> 的定义
推荐 -

HTML 4.01 与 HTML5 中的差异

无。

桌面浏览器兼容性

特性 Chrome Edge Firefox Internet Explorer Opera Safari
基础支持 支持 支持 支持 不支持 支持 支持
disabled 支持 支持 支持 不支持 支持 支持
label 支持 支持 支持 不支持 支持 支持

移动浏览器兼容性

特性 Android Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
基础支持 支持 支持 支持 支持 不支持 未知 支持
disabled 支持 支持 支持 支持 不支持 未知 支持
label 支持 支持 支持 支持 不支持 未知 支持

相关链接