仅静态分组 ，不能按依赖库版本逻辑分组；需按生命周期（stable/legacy/alpha）分组并设非空 label，配合 css 增强可读性，超 30 版本应改用搜索下拉或级联选择。
<optgroup></optgroup> 不能直接对“依赖库版本”做逻辑分组——它只作用于 <select></select> 内部的 <option></option>，且分组依据是静态 HTML 结构，不是运行时数据或语义关系。你真正要做的，是把“依赖库 + 版本”这一对信息，按合理业务逻辑组织进下拉菜单中。
为什么直接用 <optgroup></optgroup> 套版本列表常失败
常见错误是把所有版本（如 react@18.2.0、react@17.0.2、vue@3.4.15）一股脑塞进一个 <optgroup label="前端框架"></optgroup>，结果用户根本分不清哪些是稳定版、哪些是预发布、哪些已 EOL。更糟的是：漏写 label、用空字符串、或把 <optgroup></optgroup> 放在 <select></select> 外面，浏览器直接忽略整组。
-
label必须是非空字符串，例如label="React (LTS)"，不能是label=""或label=" " -
<optgroup></optgroup>必须是<select></select>的**直属子元素**，不能嵌套在<div> 或其他标签里 <li>同一 <code><select></select>中多个<optgroup></optgroup>是并列关系，浏览器不会自动排序或折叠 -
<optgroup label="Stable (v18.x)"></optgroup>→ 放react@18.2.0、react@18.3.1 -
<optgroup label="Legacy (v17.x, EOL soon)"></optgroup>→ 放react@17.0.2、react@17.1.0，并给每个<option></option>加disabled属性（如需视觉提示） -
<optgroup label="Alpha/Beta (use with caution)"></optgroup>→ 放react@19.0.0-alpha.1，并在<option></option>文本末尾加[beta]提示 -
optgroup { font-weight: bold; color: #555; margin-top: 0.6em; }—— 让标题突出且有呼吸感 -
option:not(:first-of-type) { border-top: 1px solid #eee; }—— 在每组首个选项上方加浅线（比依赖<optgroup></optgroup>自带渲染更可控） -
optgroup[label="Legacy"] option[disabled] { color: #999; text-decoration: line-through; }—— 明确标出已弃用项 - 切换为搜索型下拉（如
Choices.js或tom-select），支持关键词过滤 + 高亮匹配段落 - 改用级联选择：
<select name="library"></select>先选库名，再用 JS 动态加载对应版本列表到第二个<select></select>
按生命周期和兼容性分组比按字母顺序更有效
用户选版本时，关心的是“这个版本能不能用”“会不会被弃用”，不是“R 开头有哪些”。所以分组逻辑应反映实际约束：
避免用模糊 label，比如 label="Other versions" 或 label="Group A" —— 这类分组对开发者毫无信息价值。
CSS 微调让分组真正可读
原生 <optgroup></optgroup> 的样式太弱，不加 CSS 几乎等于没分组。必须补三处：
别试图用 optgroup::before 插入图标或修改鼠标指针——多数浏览器不支持伪元素作用于 <optgroup></optgroup>。
超过 30 个版本时，<optgroup></optgroup> 就该退场了
哪怕你把 React、Vue、Svelte、Angular 的所有小版本全列出来，分 5 组也压不住滚动疲劳。此时 <optgroup></optgroup> 已失效，真实可用的方案只有两个：
注意：移动端 Safari 原生下拉会隐藏 <optgroup></optgroup> 的 label 文字，只显示 <option></option> —— 所以高保真分组必须搭配 JS 渲染或降级提示。
