optgroup 必须嵌套在 select 内才生效，label 为纯文本不可交互，disabled 属性在 Safari 中无效，iOS 原生 select 不显示分组信息。
optgroup 标签必须嵌套在 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="水果" 会被原样显示为字符串，不会加粗。它也不响应点击、不支持 focus、不能绑定事件——点击分组标题不会展开选项，也不会触发 change 或 click 事件。
常见误操作包括：
- 试图给
- 把
label当作可翻译字段却没做前后端一致处理（比如后端返回 JSON 里是 "Fruits"，前端模板却硬写 "水果"）
optgroup 里的 option 不能用 disabled 属性控制分组禁用
在 Chrome/Firefox/Edge 中确实能禁用整组选项（置灰+不可选），但 Safari 16 及更早版本完全忽略 disabled 属性，组内 依然可点。如果业务要求全平台一致禁用，必须手动给每个 加 disabled，再配合 CSS 隐藏或禁用 的视觉表现。
另外注意： 不会阻止用户通过键盘上下键切换到该组内的选项（部分浏览器仍允许高亮，只是无法回车选中），所以表单提交前仍需服务端校验值是否合法。
移动端 Safari 对 optgroup 的样式支持极弱
iOS 原生 弹出层（即系统 Picker）根本不显示 —— 所有选项扁平排列，分组信息彻底丢失。用户无法分辨“苹果”属于“水果”还是“品牌”。这不是 bug，是 Safari 的明确设计限制。
如果产品必须在 iOS 上保留分组语义，有两个务实选择：
- 放弃原生
，改用 JS 实现的下拉组件（如 Choices.js、tom-select），它们能模拟分组并兼容 iOS - 保持原生
，但在文本里显式加入前缀，例如，确保信息不丢失
别指望用 CSS 修复这个问题—— 在 Safari 的 Picker DOM 中根本不存在，CSS 无从下手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
