optgroup 必须嵌套在 select 内才生效，label 为纯文本不可交互，disabled 属性在 Safari 中无效，iOS 原生 select 不显示分组信息。
optgroup 标签必须嵌套在 select 里才能生效
单独写 <optgroup> 不会渲染出任何内容，浏览器直接忽略。它只是 <select> 的语义化子元素，用来逻辑分组 <option>。如果把它放在 <select> 外面，或者误当成独立控件使用，下拉里就看不到分组标题，甚至整个下拉可能显示为空。
正确结构只有这一种：
<select>
<optgroup label="水果">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
</optgroup>
<optgroup label="蔬菜">
<option value="carrot">胡萝卜</option>
</optgroup>
</select>
label 属性值不能含 HTML 标签，且不可交互
label 是纯文本，写成 label="<strong>水果</strong>" 会被原样显示为字符串，不会加粗。它也不响应点击、不支持 focus、不能绑定事件——点击分组标题不会展开选项，也不会触发 change 或 click 事件。
常见误操作包括：
立即学习“前端免费学习笔记（深入）”；
- 试图给
<optgroup label="...>加class或id来做样式或 JS 控制（多数浏览器不支持，JS 无法获取到该 DOM 节点） - 用空格或换行符美化
label值（如label="水果\n(推荐)"），实际只显示为一行平铺文本 - 把
label当作可翻译字段却没做前后端一致处理（比如后端返回 JSON 里是 "Fruits"，前端模板却硬写 "水果"）
optgroup 里的 option 不能用 disabled 属性控制分组禁用
<optgroup disabled> 在 Chrome/Firefox/Edge 中确实能禁用整组选项（置灰+不可选），但 Safari 16 及更早版本完全忽略 disabled 属性，组内 <option> 依然可点。如果业务要求全平台一致禁用，必须手动给每个 <option> 加 disabled，再配合 CSS 隐藏或禁用 <optgroup label> 的视觉表现。
另外注意：<optgroup disabled> 不会阻止用户通过键盘上下键切换到该组内的选项（部分浏览器仍允许高亮，只是无法回车选中），所以表单提交前仍需服务端校验值是否合法。
移动端 Safari 对 optgroup 的样式支持极弱
iOS 原生 <select> 弹出层（即系统 Picker）根本不显示 <optgroup label> —— 所有选项扁平排列，分组信息彻底丢失。用户无法分辨“苹果”属于“水果”还是“品牌”。这不是 bug，是 Safari 的明确设计限制。
如果产品必须在 iOS 上保留分组语义，有两个务实选择：
- 放弃原生
<select>，改用 JS 实现的下拉组件（如 Choices.js、tom-select），它们能模拟分组并兼容 iOS - 保持原生
<select>，但在<option>文本里显式加入前缀，例如<option value="apple">[水果] 苹果</option>，确保信息不丢失
别指望用 CSS 修复这个问题——<optgroup> 在 Safari 的 Picker DOM 中根本不存在，CSS 无从下手。
