前段时间分享过一个支持单选的穿梭器（列表框左右双向选择）案例，很多朋友觉得很赞，同时也想进一步学习并掌握支持单选、多选、全选的穿梭器交互制作。作者将通过这篇案列分享，教大家使用Axure制作实现“穿梭器：双向列表带计数选择（支持单选、多选和全选）”。

一、演示地址

穿梭器：双向列表带计数选择（支持单选、多选和全选）

二、实现效果

1. 双向列表均支持单选、多选或全选；
2. 移入选项、点击选项时分别有文字颜色或背景色的变化，突出选项；
3. 如果左侧选项没有选中，点击向右选择时，出现错误提示信息；
4. 如果右侧选项没有选中，点击向左选择时，出现错误提示信息；
5. 点击全部选择时，左侧数据全部移入右侧；点击全部取消时，右侧数据全部移入左侧；
6. 每次选择变动后，可选项和已选项的数据都会相应变化；
7. 当可选项或已选项为0时，可选项和已选项的数据也能正确显示。

三、原理分析

1. 提供左右两个列表框，两边的数据内容一致，数据是否显示的状态互斥；
2. 左边为待选项的容器，初始状态全部为1，表示全部可见；
3. 右侧为已选项的容器，初始状态全部为0，表示全部不可见；
4. 当选中左边的选项，确认执行选择时，将左边选中项状态设置为0，同时将右边对应的选项设置为1；
5. 执行完成后，左边选中的数据隐藏，右边显示左侧隐藏的数据；
6. 取消选择的方法原理相同；
7. 点击全部选择时，将左侧所有数据状态全部设置为0，同时将右边全部数据状态设置为1（不需考虑之前的数据显示状态）；
8. 执行非全选时，如果没有选择数据项，则给出错误提示即可；

注：单选穿梭器案例是采用变量赋值方法制作，由于中继器不支持同时插入多条数据，故多选案例不能用变量方法实现。

四、元件准备

1. 待选城市文本标签，用于显示待选城市的计数
2. 待选项背景框（left_bg），放在待选项底部
3. 待选项动态面板(left)，用来存放可供选择的列表项；left面板中包含一个动态面板，放置中继器left；中继器left中用来存储可供选择的列表项
4. 选项矩形（left_sl），触发左侧待选项移入右侧已选项
5. 选项矩形（right_sl），触发右侧已选项移入左侧待选项
6. 选项矩形（全部选择），触发左侧待选项全部移入右侧已选项
7. 选项矩形（全部取消），触发右侧已选项全部移入左侧待选项
8. 已选城市文本标签，用于显示已选城市的计数
9. 已选项背景框（right_bg），放在已选项底部
10. 已选项动态面板(right)，用来存放已经选择的列表项；right面板中包含一个动态面板，放置中继器right；中继器right用来存储已经选择的列表项
11. 操作提示组合元件，用于没有选择选项时的错误

隐藏提示文件，重新布局元件后效果如下：

五、实现步骤