级联选择器Cascader
你可能会说
选地址那种，先选省、再选市、再选区，一层层点下去。
点开一个选项后继续选择下一级，常见于省、市、区选择例如填写收货地址时，先选“广东省”，再选“深圳市”，最后选“南山区”，完成后要显示整条路径。若用户需要同时选择多个地区，用 树选择 Tree Select 更合适。
先知道
你可以这样告诉 AI Agent
把收货地址里的地区字段改成“省 → 市 → 区”级联选择器，每次只选择一条路径，父级不能直接作为最终结果。关闭面板后显示完整路径，提交时保存末级地区 ID；选项较多时支持搜索完整路径。改完后测试首次打开、逐级选择、返回修改上一级、搜索和表单提交，确认显示路径与提交值一致。
什么时候用
- 省市区地址：常见的级联选择场景省 / 市 / 区广东省深圳市南山区
- 组织架构：公司 → 部门 → 小组技术中心 / 前端组技术中心 ▸平台研发 ▸前端组
- 商品 / 内容类目：大类 → 小类 → 具体分类数码电器 ▸手机通讯 ▸智能手机
- 选中后回显完整路径：让用户确认自己选了哪地址广东省 / 深圳市 / 南山区
什么时候不用
- 数据只有一层：使用 选择器 Select，无需级联进行中 ▸进行中数据只有一层，不需要增加二级菜单
- 需要勾选多个分支：按选择规则评估 树选择 Tree Select研发部 ×2☑ 研发部☑ 前端组☐ 后端组☐ 设计部
- 每层只有少量选项时，直接平铺会更快公开仅成员私密
- 选项较多且用户需要搜索：使用可搜索级联南山广东省 / 深圳市 / 南山区广东省 / 广州市 / 南山街道
组成结构 · Anatomy
南山区深圳市▸广州市▸
回显已选路径，如「广东 / 深圳 / 南山」
一级一列，选中即展开下一列
当前级的一个可选项
表示这项还有子级，点它往右展开
常见变体 · Variants
省市区Region
广东省▸
深圳市▸
南山区
地址等具有明确父子层级的数据
完整路径回显Path Echo
广东省 / 深圳市 / 南山区
选了哪几级都要让用户看得明白
仅末级回显Leaf Only
南山区
层级仅用于选择过程，提交结果只保留末级节点
可搜索Searchable
🔍南山
广东省 / 深圳市 / 南山区广西 / 桂林市 / 南山街道
选项较多时支持直接搜索路径
典型使用场景
收货地址选择
所在地区
广东省 / 深圳市 / 南山区
广东省▸广西▸
广州市▸深圳市▸
福田区南山区
筛选商品类目
商品管理
数码电器 / 手机通讯
📱
智能手机 Pro
¥ 3,999
🎧
降噪耳机
¥ 899
⌚
运动手表
¥ 1,299
分配到部门
林小hu
技术中心 / 前端组
技术中心▸市场部▸
平台研发▸大数据▸
前端组后端组
选择所属行业
企业认证
公司名称
所属行业
信息技术 / 互联网
快速练习