HTML optgroup 语法
在 HTML 中，optgroup 标签用于在下拉列表（select）或可选列表（datalist）中对选项进行分组。当选项数量比较多时，它可以很方便地帮助用户更轻松找到所需选项，从而提升用户体验。
语法：
<select>
<optgroup label="分组名称1">
<option value="值1">选项1</option>
<option value="值2">选项2</option>
</optgroup>
<optgroup label="分组名称2">
<option value="值3">选项3</option>
<option value="值4">选项4</option>
</optgroup>
</select>说明：
label 是 optgroup 标签的必需属性，它用于指定分组的文本内容。
注意:
- optgroup 元素只能包含 option 元素，不能包含其他元素。
- optgroup 元素不能嵌套。也就是说，一个 optgroup 里面不能再放另一个 optgroup。
HTML optgroup 摘要
| 属于 | HTML 表单 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML optgroup 示例
接下来，我们通过几个简单的例子来讲解一下 HTML optgroup 标签是如何使用的。
示例 1：optgroup 标签用于下拉列表（select）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<label>
选择食物：
<select name="food">
<optgroup label="水果">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="watermelon">西瓜</option>
</optgroup>
<optgroup label="蔬菜">
<option value="tomato">番茄</option>
<option value="potato">土豆</option>
<option value="cabbage">白菜</option>
</optgroup>
</select>
</label>
</body>
</html>默认情况下，页面效果如下图 1 所示。当点击下拉列表时，页面效果如下图 2 所示。
示例 2：optgroup 标签用于可选列表（datalist）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<label>选择食物：<input type="text" name="food"></label>
<datalist id="food">
<optgroup label="水果">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="watermelon">西瓜</option>
</optgroup>
<optgroup label="蔬菜">
<option value="tomato">番茄</option>
<option value="potato">土豆</option>
<option value="cabbage">白菜</option>
</optgroup>
</datalist>
</body>
</html>默认情况下，页面效果如下图 1 所示。当点击下拉列表时，页面效果如下图 2 所示。
提示:
- 使用 optgroup 能让下拉列表更有结构感，尤其适用于分类明显、选项数量多的情况（如城市分类、商品类型、部门组织等）。
- optgroup 标签不仅可以在 select 中使用，还可以在 datalist 中使用（但浏览器支持略有限，建议测试兼容性）。
