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