<optgroup>必须嵌套在<select>内且需带label属性，用于视觉分组；其自身不可选、无value、不提交数据，label仅作UI提示，不支持嵌套和HTML实体，样式控制受限，移动端常隐藏标题。

怎么用 <optgroup> 给 <select> 分组选项

直接加 <optgroup> 标签就行，它必须嵌在 <select> 里，不能单独存在，也不能套在别的标签里。浏览器会自动给分组加灰色标题、禁用选择，视觉上明显区分。

• <optgroup> 必须有 label 属性，否则不渲染分组标题（部分浏览器可能忽略整个标签）
• 里面的 <option> 仍可正常选中，但 <optgroup> 自身不可选、没有 value
• 不支持嵌套：一个 <optgroup> 里不能再放另一个 <optgroup>
• 多个 <optgroup> 按顺序排列，中间不会自动空行，如需间距得靠 CSS

<optgroup> 的 label 属性要注意什么

这个属性值会直接显示为分组标题，但不会提交到后端——它只是 UI 提示，和 <option> 的 value 完全无关。用户看到的是 label 文本，选中的是里面某个 <option> 的 value。

• 如果 label 是空字符串或只含空白符，Chrome/Firefox 通常跳过渲染该分组（Safari 可能留空行）
• 不支持 HTML 实体或标签：写 <optgroup label=" "> 显示的就是文字  ，不是空格
• 国际化场景下，label 应随页面语言动态切换，别硬编码在 HTML 里

为什么选中项的 value 和 <optgroup> 无关

因为 <optgroup> 不参与表单数据收集，FormData 或 select.value 只取当前选中的 <option> 的 value。哪怕你把所有 <option> 的 value 都设成一样，也完全不影响分组结构。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 常见错误：试图通过 <optgroup value="group1"> 传值——<optgroup> 没有 value 属性，加了也无效
• 如果需要记录所属分组，得在 <option> 的 value 里编码（如 user:alice），或用 data-group 自定义属性配合 JS 读取
• 用 select.options[select.selectedIndex].parentNode 可以拿到当前选中项的父级 <optgroup> 节点（若存在），但注意默认选项可能属于 <select> 直接子节点（即无分组）

兼容性和样式限制有哪些

所有现代浏览器都支持 <optgroup>，但样式控制极弱：你不能给 <optgroup> 设背景色、内边距或字体大小，label 文字颜色也基本只能改灰度（用 color），且 Safari 对 font-weight 支持不稳定。

立即学习“前端免费学习笔记（深入）”；

• CSS 中 optgroup 伪类不被支持，无法用 ::before 添加图标或符号
• 移动端（尤其 iOS Safari）的原生下拉菜单会隐藏 <optgroup> 标题，只显示 <option> —— 这是系统控件限制，JS 模拟下拉才能绕过
• 如果用了 appearance: none 自定义样式，<optgroup> 标题大概率消失，需额外用 JS 构建分组逻辑

实际用的时候，分组逻辑尽量简单；想靠它做复杂筛选或联动，不如早点切到 JS 渲染的下拉组件。原生 <optgroup> 就是个轻量语义标记，别指望它干活。