HTML: <optgroup> 标签

HTML <optgroup>标签在 <select>控件的值的下拉列表中创建一组选项。这些下拉值由一系列 <option>标签定义，并使用 <optgroup>标签进行分组。label <optgroup> 的值将显示为 <select>控件中分组项目上方的灰色标题。此标签通常也称为 <optgroup>元素。

在线示例

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

示例

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML optgroup标签的使用(菜鸟教程 (cainiaojc.com))</title>
</head>
<body>
  <label for="tutorial_choice">Tutorials: </label>
  <select id="tutorial_choice">
    <optgroup label="Web">
      <option value="html">HTML</option>
      <option value="css">CSS</option>
    </optgroup>
    <optgroup label="Database">
      <option value="sql">SQL</option>
      <option value="oracle">Oracle</option>
    </optgroup>
  </select>
</body>
</html>

测试看看 ‹/›

在此HTML5文档示例中，我们使用了<optgroup>标记在下拉列表中创建两个选项组。第一个选项组的标题为Web，包含两个下拉值-HTML和CSS。第二个选项组的标题为“数据库”，并包含两个下拉值-SQL和Oracle。

浏览器兼容性

IEFirefoxOperaChromeSafari

大多数主流浏览器支持 <optgroup>标签。

标签定义及使用说明

<optgroup>标签将一组<option>标记组织到具有组标题的选项组中。

label <optgroup> 的值将显示为灰色标题。所有分组的项目将作为缩进的选项列表显示在标题下方。

默认情况下，<select>标记中的第一个选项将显示为所选项目。用户可以在下拉列表中选择另一个选项。

如果你有很多的选项组合, 你可以使用<optgroup> 标签能够很简单的将相关选项组合在一起。

属性

属性	值	描述
disabled	disabled	规定禁用该选项组。
label	text	为选项组规定描述。

全局属性

<optgroup> 标签支持全局属性，查看完整属性表 HTML全局属性。

事件属性

<optgroup> 标签支持所有 HTML事件属性。

HTML: <option> 标签 HTML: <ol> 标签

查看更多关于 HTML: <optgroup> 标签的详细内容...