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