必须嵌套在内且需带label属性，用于视觉分组；其自身不可选、无value、不提交数据，label仅作ui提示，不支持嵌套和html实体，样式控制受限，移动端常隐藏标题。
怎么用 <optgroup></optgroup> 给 <select></select> 分组选项
直接加 <optgroup></optgroup> 标签就行，它必须嵌在 <select></select> 里，不能单独存在，也不能套在别的标签里。浏览器会自动给分组加灰色标题、禁用选择，视觉上明显区分。
-
<optgroup></optgroup>必须有label属性，否则不渲染分组标题（部分浏览器可能忽略整个标签） - 里面的
<option></option>仍可正常选中，但<optgroup></optgroup>自身不可选、没有value - 不支持嵌套：一个
<optgroup></optgroup>里不能再放另一个<optgroup></optgroup> - 多个
<optgroup></optgroup>按顺序排列，中间不会自动空行，如需间距得靠 CSS
<optgroup></optgroup> 的 label 属性要注意什么
这个属性值会直接显示为分组标题，但不会提交到后端——它只是 UI 提示，和 <option></option> 的 value 完全无关。用户看到的是 label 文本，选中的是里面某个 <option></option> 的 value。
- 如果
label是空字符串或只含空白符，Chrome/Firefox 通常跳过渲染该分组（Safari 可能留空行） - 不支持 HTML 实体或标签：写
<optgroup label=" "></optgroup>显示的就是文字 - 国际化场景下，
label应随页面语言动态切换，别硬编码在 HTML 里
为什么选中项的 value 和 <optgroup></optgroup> 无关
因为 <optgroup></optgroup> 不参与表单数据收集，FormData 或 select.value 只取当前选中的 <option></option> 的 value。哪怕你把所有 <option></option> 的 value 都设成一样，也完全不影响分组结构。
- 常见错误：试图通过
<optgroup value="group1"></optgroup>传值——<optgroup></optgroup>没有value属性，加了也无效 - 如果需要记录所属分组，得在
<option></option>的value里编码（如user:alice），或用data-group自定义属性配合 JS 读取 - 用
select.options[select.selectedIndex].parentNode可以拿到当前选中项的父级<optgroup></optgroup>节点（若存在），但注意默认选项可能属于<select></select>直接子节点（即无分组）
兼容性和样式限制有哪些
所有现代浏览器都支持 <optgroup></optgroup>，但样式控制极弱：你不能给 <optgroup></optgroup> 设背景色、内边距或字体大小，label 文字颜色也基本只能改灰度（用 color），且 Safari 对 font-weight 支持不稳定。
- CSS 中
optgroup伪类不被支持，无法用::before添加图标或符号 - 移动端（尤其 iOS Safari）的原生下拉菜单会隐藏
<optgroup></optgroup>标题，只显示<option></option>—— 这是系统控件限制，JS 模拟下拉才能绕过 - 如果用了
appearance: none自定义样式，<optgroup></optgroup>标题大概率消失，需额外用 JS 构建分组逻辑
<optgroup></optgroup> 就是个轻量语义标记，别指望它干活。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
