HTML - <optgroup> 标签

HTML <optgroup> 用于 <select> 元素中，用于将相关的<option>元素进行分组。它提供了一种设置和构建下拉列表中选项的方法。当您希望通过将大型选项列表划分为部分或类别来组织和改善用户体验时，这非常有用。

语法

<optgroup label= "..."></optgroup>

属性

HTML optgroup 标签支持 HTML 的全局和事件属性。以及一些特定的属性，如下所示。

属性	值	描述
disabled	disabled	禁用输入控件。按钮将不会接受用户的更改。它也不能接收焦点，并且在按 Tab 键时会被跳过。
label	文本	定义使用 <optgroup> 时要使用的标签。

HTML optgroup 标签示例

以下示例将说明 optgroup 标签的使用方法。在哪里、何时以及如何使用它来创建 optgroup 以及我们如何使用 CSS 样式化该 optgroup。

创建 Optgroup 元素

在以下程序中，我们使用 HTML <optgroup> 标签在 HTML 中的“select”元素中创建一个选项组。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML optgroup Tag</title>
</head>
<body>
   <!--create optgroup element-->
   <select>
      <optgroup label='Fruits'>
         <option value="apple">Apple</option>
         <option value="banana">Banana</option>
         <option value="orange">Orange</option>
         <option value="grapes">Grapes</option>
      </optgroup>
   </select>
</body>
</html>

Optgroup 中的嵌套选项

以下是 HTML <optgroup> 标签的另一个示例。在这里，我们使用 <optgroup> 标签在 HTML 中的“select”元素中创建多个选项组。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML optgroup Tag</title>
</head>
<body>
   <!--create optgroup element-->
   <select>
      <option value="">Choose your option</option>
      <optgroup label='States'>
         <option value="uttarpradesh">Uttar Pradesh</option>
         <option value="punjab">Punjab</option>
         <option value="bihar">Bihar</option>
         <option value="jharkhand">Jharkhand</option>
      </optgroup>
      <optgroup label='Related Cities'>
         <option value="lucknow">Lucknow</option>
         <option value="jalandhar">Jalandhar</option>
         <option value="patna">Patna</option>
         <option value="ranchi">Ranchi</option>
      </optgroup>
   </select>
</body>
</html>

禁用特定 Optgroup

在此示例中，我们使用 HTML <optgroup> 在 HTML 中的“select”元素中创建分组选项。我们使用“disabled”属性来禁用创建的组。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML optgroup tag</title>
</head>
<body>
   <!--create optgroup tag-->
   <select>
      <option value="">Choose your option</option>
      <optgroup label='Group 1'>
         <option value="opt1.1">Option 1.1</option>
         <option value="opt1.2">Option 1.2</option>
      </optgroup>
      <optgroup label='Group 2'>
         <option value="opt2.1">Option 2.1</option>
         <option value="opt2.2">Option 2.2</option>
         </optgroup>
         <optgroup label='Group 3' disabled>
         <option value="opt3.1">Option 3.1</option>
         <option value="opt3.2">Option 3.2</option>
      </optgroup>
   </select>
</body>
</html>

样式化 Optgroup

以下是示例，我们在其中使用 HTML 中的 HTML <optgroup> 标签在“select”元素中创建选项分组。我们使用 CSS 来设置“optgroup”的样式。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML optgroup tag</title>
   <style>
      optgroup {
         color: green;
         background-color: aquamarine;
      }
   </style>
</head>
<body>
   <!--create optgroup tag-->
   <select>
      <option value="">Choose your option</option>
      <optgroup label='Frontend'>
         <option value="html">HTML</option>
         <option value="css">CSS</option>
         <option value="javascript">JavaScript</option>
      </optgroup>
         <optgroup label='Backend'>
         <option value="java">Java</option>
         <option value="php.2">PHP</option>
      </optgroup>
   </select>
</body>
</html>

支持的浏览器

标签
optgroup	是	是	是	是	是

html_tags_reference.htm

打印页面