HTML 选项分组：增强下拉列表功能

介绍

HTML 中的 <optgroup> 标签用于在下拉列表中创建选项的分组。本实验将带你逐步创建一个 optgroup，并使用属性对其进行自定义。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_group("Grouping Form Elements") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70808{{"HTML 选项分组"}} html/head_elems -.-> lab-70808{{"HTML 选项分组"}} html/forms -.-> lab-70808{{"HTML 选项分组"}} html/form_group -.-> lab-70808{{"HTML 选项分组"}} html/form_access -.-> lab-70808{{"HTML 选项分组"}} html/inter_elems -.-> lab-70808{{"HTML 选项分组"}} html/custom_attr -.-> lab-70808{{"HTML 选项分组"}} end

设置 HTML 文件

创建一个名为 index.html 的新文件。添加基本的 HTML 结构，并在 body 元素中包含一个 <select> 标签。

<!doctype html>
<html>
  <head>
    <title>HTML Optgroup 标签实验</title>
  </head>
  <body>
    <select>
      <!-- options will go here -->
    </select>
  </body>
</html>

向下拉列表中添加选项

在 <select> 标签内添加 <option> 标签以创建选项列表。使用 value 属性为每个选项设置值。

<select>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

创建 Optgroup

使用 <optgroup> 标签将某些选项分组。添加 label 属性以定义组的名称。

<select>
  <optgroup label="Group 1">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="option3">Option 3</option>
  </optgroup>
</select>

禁用 Optgroup

使用 disabled 属性禁用下拉列表中的整个选项组。将此属性添加到 <optgroup> 的起始标签中。

<select>
  <optgroup label="Group 1" disabled>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="option3">Option 3</option>
  </optgroup>
</select>

总结

<optgroup> 标签用于在下拉列表中创建选项的分组。你可以使用 disabled 和 label 等属性对其进行自定义。通过本实验中的步骤，你可以在 HTML 中有效地分组和组织选项。