Axure设计：双向列表带计数选择思维导图

拖入一个中继器left，给中继器的默认Column0列添加21条数据，对应显示广东省21个地市。

将中继器的数据通过每项加载时赋值给矩形，矩形显示的数据就是待选项源数据

将中继器转换为动态面板sleft，动态面板的大小为218px*200px，设置动态面板的滚动条属性为“自动显示垂直滚动条”。

实用小技巧：将可滚动的动态面板sleft转换为动态面板left，动态面板的大小为200px*200px，设置动态面板的滚动条属性为“无”，从而可以实现滚动且隐藏滚动条的效果。

在动态面板left底部放一个带边框的矩形背景，大小为202px*202px，在矩形背景的上面部分放待选城市文本标签，用于显示待选城市的计数。

设置全局变量“select_listl”，用来临时存放左侧待选项选中的数据；全局变量“select_listr”，用来临时存放右侧已选项选中的数据；全局变量的默认初始值均为空值。

待选项矩形框用来显示待选项数据列表，分别设置鼠标悬停、鼠标放下、选中时的交互效果。

鼠标单击待选项矩形框时，切换选中状态。当待选项状态为选中时，将全局变量”select_listl”的值设置为待选项的值，同时标记该行；当待选项状态为取消选中时，将全局变量”select_listl”的值设置未空，同时取消标记该行。

中继器left的的数量值等于可选项的数据值，中继器每项加载时，设置待选城市的文本显示为“待选城市（可选[[Item.Repeater.dataCount]]项）”。

中继器赋值方法如下，文本格式为“富文本”。

[[Item.Repeater.dataCount]]表示中继器的数量值，利用富文本特性改变选项值的文本颜色。

已选项点击交互事件同待选项点击交互事件一致，此处不再重复。

已选城市文本标签设置与待选城市文本标签设置一致，此处不再重复。

点击“left_sl”按钮时，需要判断该点击事件是否为有效点击事件。

左侧待选项有选中状态时，全局变量“select_listl”不为空，点击事件有效，需要将该选项选中添加到右侧已选项列表中，同时删除待选项列表中的记录，表示选择该选项值。特别注意：此处需要将待选项及已选项的状态设置为“未选中”。

当左侧待选项没有选中状态时，点击事件无效，提示“请从待选城市选择数据项！”。

点击“right_sl”按钮时，需要判断该点击事件是否为有效点击事件。

右侧已选项有选中状态时，全局变量“select_listr”不为空，点击事件有效，需要将该选项选中添加到左侧待选项列表中，同时删除已选项列表中的记录，表示取消该选项值。

特别注意：此处需要将待选项及已选项的状态设置为“未选中”。

当右侧已选项没有选中状态时，点击事件无效，提示“请从已选城市选择数据项！”

实用小技巧：利用显示事件的“灯箱效果”，背景色为黑色，透明度设置为20%，提示效果很漂亮。