# 级联选择 级联选择用于当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择，支持单选和多选。 展开的层级建议不超过 3 层，超出建议使用树选择。 ## 使用规则 当页面上的操作选项层级关系较复杂时，用级联下拉组件可以收纳操作元素。 ## 组成要素 1. **触发区域**：通常是下拉筛选框，有时候也会出现在一些文本按钮中，这里以下拉筛选框作为主要场景来描述 1. **已选择项**： 用于显示已选择的信息，格式包含基础（仅显示末级选项）和全路径回显示 1. **操作区** ：默认为下拉筛选箭头，支持鼠标移入时显示清除按钮 1. **下拉选框**： 用于承载父级/子极菜单项的内容，并需要描边和投影（S2-down）来进行层级划分 1. **父级菜单项**： 展示较高层级选项，通常每个选项都包含了文本内容和下级展开箭头 1. **子级菜单项**： 展示末级选项，通常每个选项包含了文本内容和勾选样式 1. **其他** ：根据实际场景需求，部分选项中还可能包含文字提示 icon、复选框等内容。选项较长滚动时，还需包含滚动条 ## 控件类型 & 交互规则 ### 基础单选 **交互：** 点击展开下一级，点击子级的选项作为最终结果 **下拉选框收起规则：** 点击任意子级选项后，下拉选框收起 **已选择项：** 点击子级选项后，立即同步结果 ### 基础多选 **交互：** 点击展开下一级，点击子级的选项作为最终结果 **下拉选框收起规则：** 点击下拉选框外的区域，下拉选框收起 **已选择项：** 点击子级选项后，立即同步结果 ### 任意级单选 **交互：** Hover 展开下一级，点击任意级的选项作为最终结果 **下拉选框收起规则：** 点击下拉选框外的区域，下拉选框收起 **已选择项：** 点击任意级选项后，立即同步结果 ### 任意级多选 **交互：** 点击展开下一级，点击任意级选项的 checkbox 作为最终结果 **下拉选框收起规则：** 点击下拉选框外的区域，下拉选框收起 **已选择项：** 勾选任意级选项后，立即同步结果。勾选了父级，其对应子极都被勾选，仅显示父级选项作为结果 ## 使用场景 当选项具备明确层级关系（如国家城市区县/企业部门）时，建议使用级联选择器，节省空间的同时，降低操作的复杂度。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/425b7b1e24b19c26d3f5ed726b884cd9_KxvVC8sKMg.png?height=732&lazyload=true&width=1004) | ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/ce8f0c492c037abf1b439033b01f20f8_IhtlKvgmrt.png?height=732&lazyload=true&width=1004) ---|--- ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/f280964f6dabb16bf6ea6801799276a3_3hYp5rFRao.png?height=20&lazyload=true&width=800)
**正确：**
国家城市区县/企业部门的选择时，使用级联选择器，能提高操作效率、节省空间。 | ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/5d576ae0cad45457a2c92e8b32194543_EWbyDet7Zc.png?height=20&lazyload=true&width=800)
**避免：**
普通的下拉选择器组合使用，需要多次重复点击展开，效率不高，且占用较多空间。
当选项集的父级分类数量较多（超过 3 组）时，或单个分组下的选项较多（超过 5 个）时，对比带分组标题的选择器，使用级联选择器会帮助用户更直观地看到全部分类。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/c336d297169aa3890835d160b6c5d6c5_jhXeydzTVh.png?height=696&lazyload=true&width=1004) | ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/7ad747e82f2aca3e2d7e1dadc49ad186_eZLOVHkaGm.png?height=696&lazyload=true&width=1004) ---|--- ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/f280964f6dabb16bf6ea6801799276a3_3hYp5rFRao.png?height=20&lazyload=true&width=800)
**正确：**
激活下拉选框后，可以看到完整的选项结构，对每个层级菜单的选项数量有预期。 | ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/5d576ae0cad45457a2c92e8b32194543_EWbyDet7Zc.png?height=20&lazyload=true&width=800)
**避免：**
激活后的下拉选框高度有限，无法看到完整的层级结构，对选项数量无法预期。 ## 通用样式规则 ### 状态说明 #### 基础单选 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/8527c07a7eaa599a4219095d0a056462_2ALbjuKSdb.png?height=2216&lazyload=true&width=2048) #### 基础多选 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/dcadfd3df052b88a1ca6a91cbd0ddb2b_kPRdoIc6jD.png?height=2216&lazyload=true&width=2048) #### 任意级单选 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/84e2f39d71dee0b9d87f1d22ebb2155f_KHPi8mrVVM.png?height=2036&lazyload=true&width=2048) #### 任意级多选 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/1a70dfed94bead9c77991cba282a545a_Z4fCWQ7KJz.png?height=2686&lazyload=true&width=2048) ### 尺寸说明 与下拉选择组件对齐，支持单列滚动，滚动时对应列出现滚动条。 特别的：单个菜单列宽度默认为 160px，可根据实际的选项长度变化，各列可以不等宽，下拉选框整体宽度建议不超过 720px。 ### 位置说明 默认：下拉选框在底部，与输入框左对齐。左侧固定，子集向右展开。 当底部空间不足以承载下拉选框时，下拉选框从顶部呼出，与输入框左对齐。 当自己菜单展开超过输入框右侧空间不足时，下拉选框整体左移，与输入框右对齐。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/8bb28cc0aae0c3b7e56bdc99f208770d_iux6yRDUYs.png?height=1928&lazyload=true&width=2048) ### 已选择项的显示说明 全路径回显默认以“/”表示层级关系。