用实现分组并控制默认选中：需用label属性定义分组，仅包裹；默认选中可通过selected属性、select.value或selectedIndex设置，但须注意DOM渲染时机与浏览器兼容性差异。
直接说结论：用 <optgroup></optgroup> 实现分组，用 selected 属性（或 JS 的 selectedIndex / value）控制默认选中——但注意浏览器行为差异和动态渲染时的时机问题。
怎么用
分组不是靠 class 或 JS 模拟，而是原生 HTML 标签。每个 <optgroup></optgroup> 必须有 label 属性，且只能包裹 <option></option>，不能嵌套其他 <optgroup></optgroup>。
常见错误：把 <optgroup></optgroup> 放在 <select></select> 外面、漏写 label、试图给 <optgroup></optgroup> 设 value（它本身没有值，也不参与表单提交）。
示例结构：
<select name="city">
<optgroup label="华北">
<option value="bj">北京</option>
<option value="tj">天津</option>
</optgroup>
<optgroup label="华东">
<option value="sh">上海</option>
<option value="hz">杭州</option>
</optgroup>
</select>
默认选中一个 option 的三种方式
静态页面里最简单的是加 selected 属性；但实际项目中常遇到 JS 动态生成选项、异步加载后选中、或需要根据 URL 参数恢复状态的情况。
-
selected属性只在初始 HTML 中有效，JS 修改innerHTML后会丢失 - 用 JS 设置
select.value = "sh"最直观，但要求value值完全匹配（区分大小写） - 用
select.selectedIndex = 2更底层，适合已知位置但不确定 value 的场景；索引从 0 开始，<optgroup></optgroup>不占索引位 - 如果选项是 JS 动态插入的，必须等 DOM 节点挂载后再设置，否则
value赋值无效
容易被忽略的兼容性与体验细节
Chrome 和 Firefox 对 <optgroup></optgroup> 的样式支持有限：color 可以设，但 background、padding 等多数无效；iOS Safari 下 label 文字无法点击展开（只能点选项），这是系统限制，没法绕过。
默认选中还涉及可访问性：屏幕阅读器会读出 label 和当前选中项，但如果初始没设 selected，又没用 JS 补上，第一个 <option></option> 会被自动选中（但不触发 change 事件），用户可能意识不到。
另外，如果所有 <option></option> 都在 <optgroup></optgroup> 里，记得留一个空的顶级 <option></option> 作提示（比如 <option value="" disabled selected>请选择城市</option>），否则用户第一眼看不到可操作入口。
分组逻辑和默认值看似简单，但混合了 HTML 结构、DOM 时机、浏览器差异三重约束，改一处常要同步检查另两处。
