不能用单个select套所有三级选项，因为省市区是分层依赖关系而非并列选项；需用三层fieldset包裹，每层独立name、显式label绑定、data-level标记层级，并配合aria-busy和abortcontroller保障可访问性与状态同步。

为什么不能用单个

套所有三级 select

因为语义上，省、市、区是分层依赖关系，不是并列选项组。把它们全塞进一个

里， 难以准确关联到具体层级，屏幕阅读器会读成“请选择：广东省 广州市 天河区”，丢失层级意图；同时，表单提交时 value 无法天然体现“广东→广州→天河”的路径结构，后端解析易出错。

常见错误现象：label 挂在最外层

上、三个 共用同一个 name（如 name="area"）、没用 fieldset 划分逻辑边界。

• 每个

必须有独立 name，推荐 name="province" / name="city" / name="district"

用 fieldset 包裹每级，legend 写明层级含义，例如 <legend>所在省份</legend>

label 必须显式绑定对应 的 id，不能靠位置或 class 推断

怎么用 fieldset + legend 实现可访问的层级包裹

语义化不是加个标签就完事，关键在于结构能被辅助技术逐层识别。正确做法是三层嵌套：外层 form 定义整体作用域，每级 独立包裹在 fieldset 中，且 legend 文本必须描述该级选择目的，而非简单写“城市”。

示例结构片段：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

请选择所在省份

省份

请选择所在城市

城市

请选择所在区县

区县

• fieldset 自动为内部控件创建逻辑组，屏幕阅读器会播报“组：请选择所在省份”，再读选项
• disabled 属性必须加在下级 上，不只是视觉灰掉——这是 WCAG 要求的交互禁用状态
• 不要用 aria-disabled="true" 替代原生 disabled，它不阻止键盘聚焦和表单提交

dataset 标记层级比 class 更可靠

当 JS 需要根据用户选择动态加载下一级数据时，靠 class="city-select" 判断层级容易冲突（比如同时有“城市”和“城市筛选”两个组件）。用 dataset 直接存业务语义，代码更直白、不易误判。

正确写法：

<select id="province-select" name="province" data-level="1"></select><select id="city-select" name="city" data-level="2" disabled></select><select id="district-select" name="district" data-level="3" disabled></select>

• JS 中通过 select.dataset.level 获取层级，比 select.classList.contains('city') 更精准
• 避免用 name 字段推断层级（name="city" 可能被后端改名），dataset 是前端专属标记
• 配合 data-parent-id 可进一步表达依赖关系，比如 <select data-parent-id="province-select"></select>

异步加载时 fieldset 的 aria-busy 和状态同步

用户点击省份后，城市 进入加载态，仅靠 disabled 不够——屏幕阅读器不知道“正在加载”，键盘用户可能反复按空格触发重试。必须用 aria-busy="true" 明确告知状态。

• 请求发起时：给对应 fieldset 加 aria-busy="true"，同时保留 disabled 在 上
• 请求成功后：移除 aria-busy，启用 ，并确保 focus() 到它（方便键盘用户继续操作）
• 请求失败时：清空 内容，保留 disabled，并在 fieldset 内插入带 role="alert" 的错误提示

容易忽略的一点：如果用户快速切换省份，旧请求返回的数据可能覆盖新请求的结果。必须在每次新请求前调用 AbortController 中止前序请求，否则 aria-busy 状态和实际 DOM 就会脱节。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！