【Axure教程】三级多选下拉列表

原创于 2025-05-15 09:15:00 发布 · 1.1k 阅读

27 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

今天教大家制作3级多选下拉列表的原型模版，该模版是用中继器制作的，使用很方便，各级选项在对应中继器表格里维护，预览时即可自动生成交互效果，具体效果可以打开下方原型地址体验

【原型预览含下载地址】

https://axhub.im/ax9/09b38389df30358f/#g=1&p=3级多选下拉列表

【原型效果】

分级查看选项——可以根据选择的选项，查看对应的子级选项，例如点击广东省，可以查看广东剩下的城市，点击广州市可以查看广州市下的营业厅。

选中和取消选中——点击选项的多选按钮，可以切换选中或者取消选中该选项

回显标签和统计已选选项数——第三级选项选中后会回显一个标签，其他已选中的选项会自动统计，例如选择选择5个营业厅后，会显示一个营业厅的标签，然后显示+4。

自动反选——选项选中或取消后，会自动根据选项选中情况，自动反选父级，如果父级对应的子级全部选中，就显示全选状态，如果部分选中就显示部分显示的状态，如果全部没有选中，就显示未选状态

全选和全部取消选中——选中父级选项会将其下所有子级选项一起选中，取消父级选项选中时会将其下所有子级选项一起取消选中。

【制作教程】

一、材料准备

我们主要分成下拉组合和弹出组合两个部分的内容

1.1下拉组合

下拉组合主要包括背景框（矩形）、标签（矩形和中继器）、统计数（矩形）和上下箭头（三角形）组成，如下图所示摆放：

标签要放在中继器里，分页显示，每页显示一个项目，中继器表格里默认一列，链接标签矩形，表格如下图所示：

上箭头和统计数矩形默认隐藏。

1.2弹出组合

弹出组合主要包括一级选项组，二级选项组和三级选项组

一、二、三级选项组用到的元件都是一样的，主要是背景矩形和中继器，中继器内部包括多选按钮组、右箭头、变色矩形、内容文字。

多选按钮组我们需要自制，首先找到未选、半选和全选三个图标，把他们分别放在同一个动态面板内的3个不同的状态页里即可；内容文字、右箭头、和背景矩形需要增加选中和禁用的样式，后面用于制作移入边和和点击变色的效果。

一级选项中继器主要有三列，text1列一级选项的文本，jinyong列控制选择后变色，xuanzhong列控制是否选中

二级选项中继器在一级中继器的基础上增加两列，text2列对应2级选项的文本，see列用于控制是否显示。

三级选项中继器在二级中继器的基础上增加1列，text3列对应3级选项的文本。

二级和三级选项组组合默认隐藏，后续选择点击上一级内容后再显示。

将上面3个选项组组合在一起就是弹出组合，默认隐藏。

1.3其他元件

主要是指用于逻辑交互的过度元件和用于美化的元件，过度元件主要是文本标签，默认隐藏，后续制作交互时会提及；美化元件根据个人喜好风格自行添加。

二、交互制作

2.1中继器的传值

上面4个中继器都要把值传值到对应的元件，标签中继器要把默认列值传到标签矩形；一级选项中继器要把text1列的传到一级内容的文本标签；2级选项中继器要把text2列的传到2级内容的文本标签；3级选项中继器要把text3列的传到3级内容的文本标签；

如果是Axure10或以上的版本，点击连接元件，选择对应元件就可以把值传过去，如果是axure8或9的版本，需要在中继器每项加载时，用设置文本的交互，将值传过去。

2.2显示对应的选项组

鼠标单击下拉组合时，我们用显示的交互，显示弹出组合；

同理，鼠标单击一级选项内容时，我们用显示的交互，显示二级选项组，这里我们还要，用隐藏的交互，收起3级选项组，因为例如我们一级选了广东省，二级选择广州市，三级显示广州市的各个区，那如果我们再次点击一级选择了湖南省，2级显示湖南省下的各个市，如果这里不隐藏3级选项，那在选择湖南省2级市之前，3级都显示的是刚刚广州市下各区的数据，所以这里我们要把3级隐藏。

同理，鼠标单击2级选项内容时，我们用显示的交互，显示3级选项组.

2.3鼠标移入选项变色

前面我们在制作中继器里的箭头、内容文字和背景都添加了选中的样式，我们在鼠标移入时，用选中的交互，就可以让他们变色，鼠标移出时，用取消选中的交互，就可以取消选中变色效果。

2.4鼠标点击选项变色

鼠标点击一级或二级选项后，我们需要将他变色，例如点击广东省，打开显示了广东省的二级选项，这时我们要将广东省高亮变色，这样才知道显示的二级选项对应的是广东省的二级。前面我们在制作中继器里的箭头、内容文字和背景都添加了禁用的样式，所以我们在中继器每项加载时，定义，如果选中列的值等于1，就禁用这三个元件。

当鼠标单击选项时，我们用更新行的交互，将该行jinyong列的值更新为1，这样配合上面的交互，他就会变色了。需要注意的是，如果仅这样写的话，或同时出现多行禁用变色的情况，所以在更新当前行之前，首先要做一个还原，我们要把所有行的jinyong列的值更新为0，之后再更新当前行的值为1，这样就只要点击后的行变色了。

2.5显示出对应的子级选项

在二、三级中继器每项加载时，我们定义如果see列的值不等于1，就用隐藏的交互，将该选项组隐藏。

鼠标单击选项时，我们用更新行的交互，更新该选项的子级行see列为1，更新之前，和前面一样，我们要先做一个还原，更新所有行see列的值为0，完成后再该选项的子级行see列的值为1。

这样点击后，下一级就会显示该级的子级选项。

2.6控制选项选中

我们定义中继器列的xuanzhong列控制多选按钮动态面板的状态，如果xuanzhong列的值等于全选，就显示全选状态，如果等于半选，就显示半选状态。

鼠标单击半选状态或未选状态里的元件时，相当于要将该选项下所有子级选项变成全选，所以我们用更新行的交互，将当前行xuanzhong列的值更新为全选，同时也要把对应子级行对应的选项更新为全选。

同样道理，鼠标单击全选状态或未选状态里的元件时，相当于要将该选项下所有子级选项变成未选，所以我们用更新行的交互，将当前行xuanzhong列的值更新为未选，同时也要把对应子级行对应的选项更新为未选。

这里需要注意的是，如果点击选中或取消选中的是二级选项或三级选项，这里我们还需要考虑一个反选的问题，例如点击选中或者取消选中广州市，我需要考虑，广东省下是不是所有市都选中或者一个都没有选中。这里就需要判断选中数和显示数是否一致，如果一致，就是全选，用更新行的交互，将父级选项的值更新，如果两个数不一致，且选中数大于0，就是半选，否则就是未选。