<optgroup>必须置于<select>内、仅包裹<option>，label属性必填且非空，禁用时整组失效；不支持嵌套、HTML标签、空格换行文本节点。
用 <optgroup> 就能分组，但必须放在 <select> 内、且只能包裹 <option>，不能嵌套或放其他标签。
optgroup 必须有 label 属性，且值不能为空
浏览器靠 label 属性显示分组标题，如果漏写或设为空字符串，该分组会渲染失败（部分浏览器直接忽略整个 <optgroup>）。
-
label值会被当作纯文本显示，不支持 HTML 标签或转义字符 - 同一
<select>中多个<optgroup>的label可以重复，但语义上不推荐 - Chrome / Firefox / Safari 都支持，IE9+ 也 OK，无需 polyfill
optgroup 里不能放 div、span 或另一个 optgroup
<optgroup> 是严格受限的容器：只允许子节点为 <option>，任何其他元素（包括空格换行产生的文本节点）都可能被浏览器静默丢弃或导致渲染异常。
- 下面这种写法是错的：
<optgroup label="水果"> <div>苹果</div> <option value="apple">苹果</option> </optgroup>
- 正确写法只能是：
<optgroup label="水果"> <option value="apple">苹果</option> <option value="banana">香蕉</option> </optgroup>
- 也不能把
<optgroup>套在另一个<optgroup>里——HTML 规范禁止嵌套
禁用整个分组：用 disabled 属性作用于 optgroup
给 <optgroup> 加 disabled，它里面所有 <option> 都变灰不可选，比逐个加 disabled 更干净。
立即学习“前端免费学习笔记（深入）”；
- 注意：被禁用的
<option>不会触发change事件，也不会被表单提交 -
<optgroup disabled label="已下架">是合法写法，label 仍会显示，只是整组失效 - 如果某
<option>单独设了disabled，而它父级<optgroup>没禁用，该选项仍单独禁用
真正容易出问题的是混用空格/换行和自定义属性——<optgroup> 对 DOM 结构敏感，多一个看不见的文本节点就可能让分组消失。写完建议用浏览器开发者工具检查实际渲染出的 <select> 子节点结构。
