级联选择器怎么设计？层级、回显与无结果处理

级联选择器的关键是“后一级只显示当前父级允许的选项”，并且用户始终看得见自己已经选了哪条路径。本文用客户支持系统的工单归属作为练习案例：用户依次选择产品线、模块和版本，然后把结果写入工单。交互稿会放在Pixso 原型设计流程中连接和评审。

先定义层级和输出字段

不要先画三个并排下拉框。先写数据关系：产品线“支付”下有“收银台、退款”；模块“收银台”下有“网页端、移动端”；版本再从模块的可用版本中选择。提交值应保存稳定 ID 和完整路径，而不是只保存最后一个名称。

如果产品线只有一个选项，也要决定是否自动选中。自动选择会减少一步操作，但容易让用户错过范围；在会影响权限或责任人的字段上，宁可显示已加载的唯一选项并要求确认。

父级变化时先处理加载和旧值

用户从“支付”改选“账号”时，原来的模块和版本都必须清空或标为待确认，不能保留“收银台 / 移动端 v4.3”造成跨产品线的假路径。清空前若会丢弃用户输入，给出轻量提示，并把焦点放回新的模块选择。

子列表需要请求数据时，父级保留已选状态，子级显示“正在加载模块”，同时禁用提交。请求失败应保留父级并提供“重试”；不要把上一次产品线的模块列表继续显示成当前结果。连续快速切换父级时，只接受最后一次请求的回包，旧回包到达也不能覆盖新选择。

回显、搜索和无结果要分开设计

重新打开工单时，选择器应按“支付 / 收银台 / 移动端 v4.3”回显；如果某个版本已下线，显示“移动端 v4.3（已停用）”并让用户选择替代版本，不能静默换成最新版本。超长路径可在输入框显示末级名称，在旁边提供完整路径和删除入口。

当第三级没有结果，空状态要说明原因：“收银台暂无可选版本”，并给出回退到模块、修改筛选或联系管理员的路径。无结果和加载失败不是同一种状态：前者是查询成功但集合为空，后者是暂时无法取得集合。若支持搜索，搜索词只作用于当前层级或明确写“搜索全部层级”，不要让用户误以为在全站搜索。

选择方式与键盘路径

桌面端可以用横向面板展示各级列表；移动端可改成分步页面，顶部用面包屑回到父级。点击父级后，箭头键在当前列表中移动，Enter 选择，Esc 关闭弹层；选择父级后焦点移动到子列表标题，读屏用户能知道自己进入了下一层。WAI-ARIA 的 combobox 与 tree view 规范分别提供输入弹层和层级节点的键盘模型，设计稿应将可见焦点和选中状态分开。

不要把“半选”当成级联选择器的默认表现。半选更适合表示树形多选中的部分子项；单路径级联的每一级只有一个值。若业务确实需要同时选择多个末级项，应改用多选树或多选下拉，并在标题里说明数量。

用四个关键画面验证回退

在 Pixso 画布中放置“产品线已选、模块加载中、版本无结果、回退到上一级”四个画面，用同一条工单路径连起来。

逐级点击并记录每一次列表变化，才能看出回显和回退是否一致。验收时依次检查：首次打开是否有清楚标签；父级改变是否清掉失效子值；加载中是否阻止提交；请求失败是否能重试；无结果是否给出可行动的下一步；重新打开是否保存稳定 ID；键盘焦点是否没有跳到页面顶部。最后把字段名、值 ID、请求取消、错误文案和移动端折叠方式写入交付说明。