列表框的左右双向选择效果在互联网平台中应用广泛。左侧选中的选项移到右侧，右侧取消的选项移到左侧。笔者就分享这个案例，教你用Axure实现“带计数选择的双向列表”。
实现效果
双向列表为单选，不支持多选或全选；
在选项中移动并点击选项时，文本颜色或背景颜色分别发生变化，突出显示选项；
如果左侧选项未选中，当您点击右侧选择时，系统会提示“请从要选择的城市中选择数据项！”；
如果右侧选项未选中，单击左侧选择时，会提示“请从所选城市中选择数据项！”；
每次选择改变后，可选项和已选项的数据都会相应改变。
原理分析
有左右两个列表框，可以互相选择对应的选项。
左侧是待选选项的容器，用于显示待选列表项；
右边是选中的容器，用来显示选中的列表项；
两个列表框之间的选项通过两个按钮实现数据交互；
利用Axure的repeater实现列表框的容器功axure下载能。
元件准备
待选城市的文本标签，用于显示待选城市的数量。
候选人的背景框(left_bg)放在候选人的底部。
待选择的动态面板(左)用于存储可选择axure和墨刀的区别的列表项：左面板包含放置repeater left的动axure教程态面板；Left用于存储列表项，以便在中继器中进行选择。
选项矩形(leftaxure基础教程_sl)，它触发左侧选项移动到右侧选项。
选项矩形(right_sl)，它触发右边的axure动态面板选项移动到左边的选项。
所选城市文本标签，用于显示所选axure下载城市的数量。
所选axure下载背景框(right_bg)放置在所选项目axure原型设计的底部。
选中的动态面板(右)用于存储选中的列表项：右axure下载面板包含一个放置reaxure和墨刀的区别peater right的动态面板；中继器用于存储所选择的权利项目。
操作提示组合组件，用于未选择选项时的错误。
案例背景，在底部，可选。
隐藏提示文件，重新布局元件后Axure效果如下：
实现步骤
(1)准备左侧候选列表数据。
向左拖动到一个重复控件中，将21条数据添加到重复控件的默认列0中，并显示广东省的21个城市
加载每一项时，将repeater的数据赋给矩形，矩形显axure教程示的数据就是要选择的源数据。
tent/uploads/2018/09/KsJPdH7upd0ojDAdNmH1.jpg" alt="Axure设计：双向列表带计数选择" width="635" height="602" data-actiaxure官网on="zoom">将中继器转换为动态面板sleft，动态面板的大小为218px*200px，设置动态面板的滚动条属性为“自动显示垂直滚动条”。
实用小技巧：将可滚动的动态面axure怎么转换为中文版板sleft转换为动态面板left，动态面板的大小为200px*200px，设置动态面板的滚动条属性为“无”axure动态面板，从而可以实现滚动且隐藏滚动条的效果。
在动态面板laxure教程eft底部放一个带边框的矩形背景，大小为202px*202px，在矩形背景的上面部分放待选城市文本标签，用于显示待选城市的计数。
最终左侧待选项列表元件数据显示如下：
（2）准备右侧已选项列表数据
右侧已选项列表数据的实现原理与axure是什么软件左侧一axure原型设计致，差异部分在于右侧已选项数据一开始为空，最终显示如下：
（3）设置全局变量，临时存放选中项
设置全局变量“selectaxure是什么软件_listl”，用来临时存放左侧待选项选中的数据；全局变量“selectaxure怎么转换为中文版_listr”，用来临时存放右侧已选项选中的数据；全局变量的默认初始值均为空值。
（4）待Axure教程选项点击交互事件
待选项矩形Axure教程框用来显示待选项数据列表，分别设置鼠标悬停、鼠标放下、选中时的交互效果。
鼠标单击待选项矩形框时，切换选中状态。当待选项状态为选中时，将全局变量”select_listl”的值设置为待选项的值，同axure动态面板时标记该行；当待选项状态为取消选中时，将全局变量”select_listl”的值设置未空，同时取消标记该行。
（5）设置待axure怎么转换为中文版选城市文本标签事件
中继器left的的数量值等于可选项的数据值，中继器每项加载时，设置待选城市的文本显示为“待选城市（可选[[Item.Repeater.dataCount]]项）”。
中继器赋值方法如下，文本格式为“富文本”。
[[Item.Repeater.dataCount]]表示中继器的数量值，利用富文本特性改变选项值的文本颜色。
（5）待选项点击交互事件
已选项点击交互事件同待选项点击交互事件一致，此处不再重复。
（6）设置待选axure怎么转换为中文版城市文本标签事件
已选城市axure教程文本标签设置axure怎么读与待选城市文本标签设置一致，此处不再重复。
（7）左侧向右选择点击事件Axure
点击“left_sl”按钮时，需axure是什么软件要判Axure教程断该点击事件是否为有效点击事件。
左侧待选项有选中状态时，全局变量“select_listl”不为空，点击事件有效，需axure官网要将该选项选中添加到右侧已选项列表中，同时删除待选项列表中的记axure教程录，表示选择该选项值。特别注意：此处需要将待选项及已选项的状态设置为“未选中”。
当左侧待选项没有选中状态时，点击事件无效，提示“请从待选城市选择数据项！”。
（8）右侧向左选择点击事件
点击“right_sl”按钮时，需要判断该点击事件是否为有效点击事件。
右侧已选项有选中状态时，全局变量“selecaxure怎么转换为中文版t_listr”不为空，点击事件有效，需要将该选axure基础教程项选中添加到左侧待选项列表中，同时删除已选项列表中的记录，表示取消该选项值。
特别注意：此处需要将待选项及已选项的状态设置axure和墨刀的区别为“axure怎么转换为中文版未选中”。
当右侧已选项没有选中状态时，点击事件无效axure是什么软件，提示“请从已选城市选择axure官网数据项！”
实用小技巧：利用显示事件的“灯箱效果”，背景色为黑色，透明度设置为20%，提示效果很漂亮。
