optgroup 必须有非空 label 且为 select 直接子元素，否则被浏览器忽略；ios 不显示 label，需用前置标识或 js 组件替代；超 50 项应改用搜索过滤等交互降维方案。
optgroup 本身不提供交互功能，它只是语义分组容器；所谓“交互体验优化”，其实是靠它触发浏览器原生行为（如键盘跳转、屏幕阅读器播报）+ 合理结构 + 必要 CSS 补足来实现的。直接写 optgroup 却没效果，八成是结构或属性错了。
label 属性为空或缺失导致分组完全失效
这是最常被忽略却后果最重的问题：optgroup 没有 label，浏览器就当它不存在——option 照常显示，但分组标题不渲染、键盘跳转不识别、屏幕阅读器不播报归属关系。
-
<optgroup><option>苹果</option></optgroup>→ 静默失败，无标题 -
<optgroup label="">...</optgroup>或<optgroup label=" ">...</optgroup>→ Chrome/Firefox 视为无label；Safari 可能渲染空白行，造成视觉错位 - 服务端模板中用条件包裹时，如
{% if group %}<optgroup label="{{ group.name }}">...</optgroup>{% endif %}，需确保group.name经过.trim()且非空 - 中文
label控制在 2–4 字，如label="华东"，避免label="Group 1"或label="其他未分类项"
optgroup 必须是 select 的直接子元素，嵌套即失效
optgroup 不是独立控件，它只能作为 select 的一级子节点存在。任何中间层级（div、form、另一个 optgroup）都会让整个分组被浏览器解析器丢弃。
- 错误：
<select><div><optgroup label="水果"><option>苹果</option></optgroup></div></select>→ 整个optgroup被跳过 - 错误：
<optgroup label="前端"><optgroup label="框架"><option>Vue</option></optgroup></optgroup>→ 内层被忽略，外层若无label也失效 - 正确结构唯一：
<select><optgroup label="水果"><option value="apple">苹果</option></optgroup> <option value="carrot">胡萝卜</option></select> - 动态插入时，不能用
appendChild()，必须用select.add(optgroup)，且optgroup.label = "华东"必须在插入前赋值
iOS Safari 不显示 optgroup label，移动端必须另做处理
iOS 原生 select 弹出层（系统 Picker）根本不会渲染 optgroup 的 label 文本——所有 option 扁平排列，分组信息彻底丢失。这不是 bug，是 Safari 明确的设计限制。
- 不能依赖 CSS 强制显示
label：iOS 上optgroup { font-weight: bold; }无效，伪元素::before也不支持 - 务实方案一：在每个
option文本开头显式带上关键分组信息，如<option>[华东] 上海</option>，确保用户扫一眼就能定位 - 务实方案二：选项总数超 20 条时，放弃原生
select，改用Choices.js或tom-select这类 JS 组件，它们能在 iOS 上模拟分组并支持搜索 - 折中方案：保留
optgroup语义（供屏幕阅读器和桌面端使用），同时为移动端添加一个不可选的引导option，如<option disabled value="">▶ 华东城市</option>，作为视觉锚点
超过 50 项时，optgroup 已经不够用了
optgroup 是结构基座，不是性能解药。当 option 总数超过 50，哪怕分了组，用户仍要滚动、扫视、试错，键盘跳转效率也大幅下降。
- 真正有效的降维手段是切换交互模式：启用搜索过滤（如
Select2）、改用模态下拉（支持虚拟滚动）、或分步选择（先选大类再加载子项） - 高频项前置：把“常用”“最近访问”等动态分组放在最前面，降低平均滑动距离
- 最后一组可弱化呈现，例如
<optgroup label="其他省份（点击展开）"><option value="other">—— 请先选择上方常用项 ——</option></optgroup>，这是对冗长的主动妥协，而非硬塞 - 别忘了服务端校验：即使前端禁用了某组
option，提交时仍需验证value是否属于允许范围，因为禁用可被绕过
最容易被忽略的点是：你写的每一行 optgroup，都得先过浏览器解析关——label 非空、位置合法、没嵌套、没空格污染。过了这关，它才开始发挥语义价值；没过，就只是 HTML 垃圾。而一旦上了 iOS，它连视觉价值都没了，只剩语义留给辅助技术。所以别只盯着怎么“美化”，先确保它被浏览器真正认出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
