【Axure教程】标签版分级多选下拉列表

分级多选下拉列表是指一个下拉列表，它包含多个层次的选项，用户可以选择一个或多个选项。这些选项通常是根据某种层级关系来组织的，例如从上到下有不同的分类或者过滤条件，用户选择上层选项后，下层选项会发生变化，通常显示与上层选项相关的数据。

今天我们就来学习，怎么在Axure中制作标签版分级多选下拉列表的原型模版，本文为高级教程，不建议刚入门的同学直接学习，建议可以先学习前面的基础章节，对中继器有一定了解后，再回头学习本教程。

【原型地址】

https://axhub.im/ax9/09b38389df30358f/#g=1&p=2级多选下拉列表__含标签

一、效果展示

查看子级选项——点击一级选项，可以在右侧查看对应的二级选项

选中或取消选中——点击多选按钮，可以选中或取消选中当前选项

全选效果——选中一级选项后，自动全选对应的2级选项

取消全选——取消选中一级选项后，自动取消选择所有对应的2级选项

自动反选——一级选项会根据对应二级选项选中的数量自动反选

1、如果子级选项全部选中，就会变成全选状态

2、如果子级选项全部未选中，就会变成未选状态

3、如果自己选项部分选中，就会变成半选状态

生成标签——选中选项后，会自动生成对应的标签，下拉框会根据标签数量自动调整尺寸

二、制作教程

1. 材料准备

我们主要分成四部分内容制作，包括下拉框、一级选项列表，二级选项列表，选中后回显的标签。

1.1下拉框

下拉框主要由矩形和箭头组成，如下图所示摆放

1.2 一级下拉列表

一级选项列表主要由矩形（背景）和中继器制作，中继器内部包括多选按钮，文本标签、背景矩形和右箭头，其中多选按钮我们需要自制，将多选、半选和全选图标放在同一个动态面板的3个状态页里，后续通过交互切换。

中继器表格里我们需要有三列，text列对应文本，jinyong列用于控制子级显示和变色，xuanzhong列用于控制选中状态。

如果是Axure10或以上的版本，我们点击链接按钮，选择文本标签，就可以将表格文本设置到文本标签的元件里；如果是Axure9或以下的版本，我们就要在中继器每项加载时，用设置文本的交互，将表格里的值设置到文本标签元件里。

填写完成后，如果选项内容较多，我们可以将中继器转为动态面板，然后调出垂直滚动条，如果需要隐藏滚动条或美化滚动条，可以通过双动态面板来实现，完成后如下图所示。

1.3 二级下拉列表

二级选项列表和一级的基本一致，我们把一级的复制过来，将箭头删除，然后将原来的text列改成text2，增加一个text1列，text1列指的是该2级选项对应的一级选项，例如二级选项是广州市，那他的一级选项就是广东省，上面里值text1就是广东省，text2就是广州市，这里显示的文本值为text2列的值，设置方式和上面一级选项列表一致。最后我们需要增加一列xianshi列，后续用于控制显示内容。

1.4 选中后回显的标签

我们也是用中继器来制作，中继器里放置一个矩形，样式自由设计，可以参考下图所示

中继器表格里增加一列，默认为空即可，后续通过交互会将选项列表的选中项设置到这里，我们只需要将这列的值设置到矩形里即可，方法同上面的一级下拉列表。

案例中这个中继器网格分布，每行显示2个选项。

这个中继器放在下拉框的上方，整体布局如下图所示

将一级列表和二级列表组组合，作为选项的弹出列表，将标签中继器和下拉框组组合。

2. 交互制作

2.1 显示选项列表

鼠标单击下拉框组合时，我们用显示的交互，显示选项列表，这里要选择遮罩效果，遮罩为透明，这样点击空白地方就可以收起列表。

2.2 根据一级选项显示二级选项

鼠标单击一级选项时，我们想在让该行内容变色，显示2级选项列表，列表内容为该选项的子级选项，例如我们点击小米选项，右侧的2级选项就显示小米旗下的型号。

这里我们通过jinyong列来控制变色效果，首先要给中继器里需要变色的元件，包括文本标签、背景矩形、和箭头设置禁用样式，我们定义，如果jinyong列的值等于1，那么就禁用上面的元件。鼠标单击时，我们通过标记行的数据，将当前行jinyong列的值更新为1，就可以实现变色效果了，但是还有一个问题，就是如果前面有选择了其他选项，在点击选项，那就会有多个变色的选项，所以我在更新当前行之前，要先做一个还原的操作，我们可以先标记所有行，然后将所有行禁用列的值更新成不为1，这样就可以实现只有一个选项变色。

当鼠标单击后，这行的jinyong列的值等于1时，我们就要控制右侧2级选项列表的值是否显示，这里我们定义，如果显示列的值等于1，就显示，如果不等于1，就用隐藏的交互将中继器里的元件隐藏

那上面jinyong列的值等于1时，我们就可以通过更新，xianshi列的值来控制显示的内容，我们要显示的是，一级列表text列的值，等于2级列表text1列的值，符合条件的我们将他更新为1即可，这也和上面一样，设置一个还原的问题，所以我们同样需要，在更新之前，先标记所有行，将所有行的值更新为0，就是不显示，最后在更新符合条件的为1。

这样就可以点击一级选项，显示对应的二级选项了

2.3 二级列表的选中、取消选中

二级列表是案例中最后一级，所以他只有选中和未选中两个状态，我们定义如果xuanzhong列的值等于1，就将他显示选中（全选）状态，否则就显示未选状态。

鼠标单击时选中按钮时，相当于想将已选状态变成未选中状态，所以我们用更新行的交互，将该行xuanzhong列的值更新为0。

鼠标单击时未选按钮时，相当于想将未选状态变成选中状态，所以我们用更新行的交互，将该行xuanzhong列的值更新为1。

2.4 二级列表的选中后添加标签

当中继器表格xuanzhong列的值为1时，我们用添加行的交互，将值添加到标签中继器里就可以了，这里标签的文字我们可以用text1列和text2列的值组合而成。

因为中继器每次更新变动，他都会从头开始读取，所以你会发现前面选中的选项会出现重复，所以在中继器刚开始加载的时候，我们要用先将标签中继器的值还原，相当于清空，我们用标记行标记所有数据，然后用删除行删除，然后后面才是选中了一个个添加。

2.5下拉框的自适应

添加标签后，我们要根据标签的大小，调整下拉框的大小和弹出列表的位置。当标签中继器加载到最后一行时，我们用设置尺寸的交互，调整下拉框矩形的高度为标签中继器的高度+边距，在将弹出组合移动到下拉框的下方。

2.6一级列表的选中、取消选中

因为一级列表有三种形态，全选、半选和未选，所以如果点击未选状态和半选状态，相当于想将当前选项选中，并且全选2级列表对应的所有子级选项；如果点击的是全选状态，相当于想将一级列表当前选项选中变成未选中，并且2级列表所有对应的子级选项变成未选中。我们先定义，如果xuanzhong列的值等于全选，就显示全选（选中）的面板页；如果等于半选就显示半选的面板页，否则就默认显示未选的面板页。

当鼠标单击未选或半选按钮时，我们用更新行的交互，将当前面板状态更新为全选状态，然后通过更新行的交互，将2级列表text1列值等于当前列表text列的值的选项，xuanzhong列的值更新为1

当鼠标单击全选按钮时，相当于要取消当前选中，并且取消对应子级的选中，我们用更新行的交互，将当前面板状态更新为未选状态，然后通过更新行的交互，将2级列表text1列值等于当前列表text列的值的选项，xuanzhong列的值更新为0

2.7一级列表的反选

上面我们并没有直接将一级列表选项的选中状态更新到一级列表中继器里，这是因为我们是通过2级列表来反选的，我们前面2级列表选项选中时xuanzhong列的值等于1，这样我们就可以通过统计该一级选项对应的二级选项的个数，以及对应xuanzhong列加总值是否一致，如果相等，就是全选了，我们用更新行的交互，将对应1级xuanzhong列的值更新为全选；如果不等于，并且选中的值大于0，就是半选，我们用更新行的交互，将对应1级xuanzhong列的值更新为半选；如果等于0，就是未选，更新行的交互，将对应1级xuanzhong列的值更新为未选。

需要注意的是，和前面一样因为中继器每次更新都是从头开始读取，所以记录的显示数和统计数需要在加载开始的时候恢复默认值为0，然后再累计

2.8其他优化效果

最后，可以根据自己需要增加一些交互优化的效果，例如选项列表弹出时显示上箭头，收起后显示下箭头，或者鼠标移入选项变色等。

这样我们就完成了分级下拉列表原型模板了，后续使用也很方便，只需要在中继器表格里填写对应的选项，预览后即可自动生成对应的效果。

那以上就是本期教程的全部内容，感兴趣的同学们可以动手试试哦，感谢您的阅读，我们下期见。