如何使用 HTML 在下拉列表中创建一组相关选项

htmlweb developmentfront end technology更新于 2024/3/19 16:44:17

概述

相关选项组是指所有项目都属于同一类别的组。例如，苹果、香蕉、猕猴桃都属于同一个类别"水果"，而宝马、奥迪、G-Wagon 则属于汽车类别。因此，有时为了提供良好的用户体验，我们需要定义一个类别，其他选项也归属于该类别。为此，HTML 中有一个标签"<optgroup>"提供了将相同选项分组到同一类别的功能。

语法

定义相关选项组的语法是 -

<optgroup label="">
   <option value=""></option>
   <option value=""></option>
</optgroup>

<optgroup> 标签中的标签属性允许我们定义所有选项所属类别的名称。

算法

步骤 1 − 在代码编辑器中创建 HTML 样板代码。

步骤 2 −要创建下拉列表，请使用 select 标签。

<select name="" id=""> </select>

步骤 3 − 现在使用 <optgroup> 标签，此标签允许在单个类别下创建选项。同时继承一些 <option> 标签，这将在类别下创建选项。在标签属性中写入类别名称。

<optgroup label="">
   <option value=""></option>
   <option value=""></option>
   <option value=""></option>
</optgroup>

步骤 4 − 包含一组相关选项的下拉列表已成功创建。

示例

在此示例中，HTML <optgroup> 标签用于创建一组相关选项。<optgroup> 标签内的 label 属性充当属于同一类别的选项的标题。在此示例中，我们刚刚为选项创建了三个组，但如果我们想向类别中添加更多选项，我们可以简单地在 <optgroup> 标签中继承 HTML <option> 标签。 <optgroup> 标签还包含一个名为 disabled 的属性。顾名思义，disable 表示它将禁用 <optgroup> 标签包含 disable 属性的一组选项。

<html>
<head>
   <title>Create a group of related options</title>
</head>
<body>
   <select name="" id="">
      <option value="">--Choose options--</option>
      <optgroup label="Group 1">
         <option value="">option 1</option>
         <option value="">option 1</option>
         <option value="">option 1</option>
      </optgroup>
      <optgroup label="Group 2">
         <option value="">option 2</option>
         <option value="">option 2</option>
         <option value="">option 2</option>
      </optgroup>
      <optgroup label="Group 3">
         <option value="">option 3</option>
         <option value="">option 3</option>
         <option value="">option 3</option>
      </optgroup>
   </select>
</body>
</html>

下图展示了示例的输出，其中我们可以看到有三个组，分别为"组 1"、"组 2"和"组 3"，对应的选项分别为"选项 1"、"选项 2"和"选项 3"。

结论

就像我们的房间一样，架子用于有序地整理物品。同样，<optgroup> 标签使选项以系统化的方式组合在一起，从而提升了用户体验 (UX)。HTML 标签的命名方式使其一眼就能理解，就像看到由两个单词"option + group = optgroup"组成的 <optgroup> 标签一样。