HTML - optgroup 标签_HTML 菜鸟教程

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

语法

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

属性

HTML optgroup 标签支持 HTML 的全局属性和事件属性。还有一些特定的属性，这些属性在下面列出：

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

<optgroup> 标签示例

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

创建 optgroup 元素

在下面的程序中，我们将使用 <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> 标签的嵌套选项

以下是 <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> 标签

在此示例中，我们使用 <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> 标签的css样式

以下示例，我们在 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>	Yes	Yes	Yes	Yes	Yes

<< HTML - select 标签 HTML - option 标签 >>