HTML表单元素optgroup选项分组实现方法-html教程-PHP中文网

optgroup 标签必须嵌套在 select 内，label 属性必需且需转义特殊字符，不支持嵌套分组，disabled 可作用于整组或单个 option，动态操作须用 dom 方法而非 innerhtml，并注意可访问性与表单提交规范。

html表单元素optgroup选项分组实现方法

optgroup 标签必须嵌套在 select 内部，不能单独使用

浏览器会直接忽略孤立的 <optgroup></optgroup>，它不是独立控件，只是 <select></select> 的语义化分组容器。常见错误是把它写在 <select></select> 外面，或试图用 JS 动态插入到非 <select></select> 元素中——这不会渲染出任何分组效果。

正确结构只能是：

<select><optgroup label="类别A"><option value="1">选项1</option></optgroup>
<optgroup label="类别B"><option value="2">选项2</option></optgroup></select>

label 属性必需，且值会显示为灰色不可选标题（各浏览器样式略有差异）
不支持嵌套 <optgroup></optgroup> —— 二级分组无法实现
部分旧版 iOS Safari 对 label 中文显示有截断问题，建议控制长度在 8 字以内

disabled 属性作用于整个分组，但 option 仍可单独设 disabled

给 <optgroup disabled></optgroup> 加上 disabled，会让该组下所有 <option></option> 变灰且不可选；但某个 <option></option> 即使在其父 <optgroup></optgroup> 已禁用，仍可额外加 disabled —— 不冲突，只是冗余。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

若只需禁用部分选项，别禁用整个 <optgroup></optgroup>，否则丧失分组语义
JS 检测时：select.options[i].disabled 返回的是最终生效状态（继承自 optgroup 或自身）
提交表单时，被禁用的 <optgroup></optgroup> 下所有 <option></option> 都不会发送

JavaScript 动态操作 optgroup 要用标准 DOM 方法，不要 innerHTML

用 innerHTML 替换 <select></select> 内容会重置用户已选值、清空原生 focus 状态，且在 IE 中可能丢失 <optgroup></optgroup> 的 label 渲染。正确做法是用 document.createElement 和 appendChild。

创建分组：const group = document.createElement('optgroup'); group.label = '地区';
追加选项：group.appendChild(optionEl);，再 selectEl.appendChild(group);
想清空某组？用 group.remove()，别用 group.innerHTML = ''
注意：动态添加后，select.value 不会自动更新，需手动触发 select.dispatchEvent(new Event('change')) 如果依赖监听