HTML下拉框怎样分组选项_HTML下拉框用optgroup归类选项【组织】

必须置于内、仅包裹，label属性必填且非空，禁用时整组失效；不支持嵌套、HTML标签、空格换行文本节点。

用 就能分组，但必须放在 内、且只能包裹 ，不能嵌套或放其他标签。

optgroup 必须有 label 属性，且值不能为空

浏览器靠 label 属性显示分组标题，如果漏写或设为空字符串，该分组会渲染失败（部分浏览器直接忽略整个 ）。

• label 值会被当作纯文本显示，不支持 HTML 标签或转义字符
• 同一 中多个 的 label 可以

  

  重复，但语义上不推荐
• Chrome / Firefox / Safari 都支持，IE9+ 也 OK，无需 polyfill

optgroup 里不能放 div、span 或另一个 optgroup

是严格受限的容器：只允许子节点为 ，任何其他元素（包括空格换行产生的文本节点）都可能被浏览器静默丢弃或导致渲染异常。

• 下面这种写法是错的：

  
    苹果
    苹果
  

• 正确写法只能是：

  
    苹果
    香蕉
  

• 也不能把 套在另一个 里——HTML 规范禁止嵌套

禁用整个分组：用 disabled 属性作用于 optgroup

给 加 disabled，它里面所有 都变灰不可选，比逐个加 disabled 更干净。

• 注意：被禁用的 不会触发 change 事件，也不会被表单提交
• 是合法写法，label 仍会显示，只是整组失效
• 如果某 单独设了 disabled，而它父级 没禁用，该选项仍单独禁用

真正容易出问题的是混用空格/换行和自定义属性—— 对 DOM 结构敏感，多一个看不见的文本节点就可能让分组消失。写完建议用浏览器开发者工具检查实际渲染出的 子节点结构。