数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 HTML 在下拉列表中创建一组相关的选项
概述
一组相关的选项是指所有项目都属于同一类别的一组。例如，苹果、香蕉、奇异果都属于同一组，称为水果；宝马、奥迪、G级越野车都属于汽车类别。因此，有时为了提供良好的用户体验，我们需要定义一个类别，其他选项都属于该类别。为此，HTML 中有一个标签可以提供此功能，用于将相同的选项分组到一个称为“<optgroup>”的类别下。
语法
定义一组相关选项的语法如下：
<optgroup label=""> <option value=""></option> <option value=""></option> </optgroup>
<optgroup> 标签中的 label 属性允许我们定义一个类别名称，所有选项都属于该类别。
算法
步骤 1 − 在代码编辑器中创建一个 HTML 基本代码。
步骤 2 −要创建下拉列表，请使用 select 标签。
<select name="" id=""> </select>
步骤 3 − 现在使用 <optgroup> 标签，此标签允许在单个类别下创建选项。还可以继承一些 <option> 标签，这些标签将在类别下创建选项。在 label 属性中写入类别的名称
<optgroup label=""> <option value=""></option> <option value=""></option> <option value=""></option> </optgroup>
步骤 4 − 成功创建了包含一组相关选项的下拉列表。
示例
在此示例中，HTML <optgroup> 标签用于创建一组相关选项。<optgroup> 标签内的 label 属性充当属于同一类别的选项的标题。在此示例中，我们只为选项创建了三个组，但如果要向类别添加更多选项，只需在 <optgroup> 标签中继承 HTML <option> 标签即可。<optgroup> 标签还包含一个名为 disabled 的属性。顾名思义，它将禁用 <optgroup> 标签包含 disabled 属性的某些选项组。
<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 标签的命名方式使其名称易于理解，例如，看到 <optgroup> 标签是由两个单词组成的：“option + group = optgroup”。
488 次浏览
