支持省份分组城市选项但不支持多级嵌套，必须置于内且仅包裹；需添加禁用的默认提示项；联动筛选应改用双+JS；兼容IE9+，无障碍可加aria-label。
使用 <optgroup></optgroup> 可以让城市下拉列表按省份分组，提升可读性和用户体验。它本身不支持多级嵌套（比如省→市→区），但能清晰实现“省份为组、城市为选项”的二级结构。
基本语法：用 label 定义省份分组
<optgroup></optgroup> 必须放在 <select></select> 内部，且只能包裹 <option></option>，不能嵌套其他 <optgroup></optgroup>。每个分组通过 label 属性标明省份名称：
<select name="city">
<optgroup label="广东省">
<option value="gz">广州市</option>
<option value="sz">深圳市</option>
</optgroup>
<optgroup label="江苏省">
<option value="nj">南京市</option>
<option value="sz">苏州市</option>
</optgroup>
</select>提升实用性：添加默认提示与禁用分组标题
用户首次打开下拉时，应看到明确提示（如“请选择城市”），且分组名不可被选中：
- 在
<select></select>开头加一个带空值的<option></option>，并设disabled selected -
<optgroup></optgroup>本身不能点击，无需额外处理，但确保其内部<option></option>都有合法value
<select name="city">
<option value="" disabled selected>-- 请选择城市 --</option>
<optgroup label="浙江省">
<option value="hz">杭州市</option>
<option value="nb">宁波市</option>
</optgroup>
</select>配合 JavaScript 实现联动筛选（如先选省再显市）
若需“先选省份，再动态加载对应城市”，<optgroup></optgroup> 不适用——它始终显示全部分组。此时应改用两个独立 <select></select>：
立即学习“前端免费学习笔记（深入）”；
- 第一个
<select></select>列出所有省份（value对应省份编码） - 监听其
change事件，清空并重填第二个城市<select></select>的<option></option> - 城市数据可用对象存储，例如：
{'zj': ['杭州市', '宁波市'], 'js': ['南京市', '苏州市']}
注意事项与兼容性
<optgroup></optgroup> 在所有现代浏览器中完全支持，包括 IE9+。但需注意：
- 部分屏幕阅读器对
label的播报效果有限，可补充aria-label提升无障碍体验 - 移动端 Safari 和 Android 浏览器中，分组视觉样式较弱，建议用 CSS 微调字体或间距增强区分度
- 不要试图用 CSS 给
<optgroup></optgroup>添加背景色或边框——多数浏览器忽略这些样式，仅支持color和font-weight
