穿梭框是系统中常用的选择器，它可以从一堆选项中选出所需要的选项。那今天我们如何在Axure中如何制作高保真的多选穿梭框的原型模板。
制作完成之应具备以下交互效果：
- 在可选栏目选项中可以选择多个选项，选中后点击右箭头可以设置到已选栏目
- 在已选栏目选项中可以选择多个选项，选中后点击左箭头可以取消选择，并恢复到未选栏目
- 可选栏目和已选栏目都可以通过模糊搜索快速查询选项
【原型预览】
用电脑点击左下方阅读原文或复制打开下面的原型预览地址
https://axhub.im/ax9/10fc5fb77521f868/#g=1
【原型下载】
方式2：https://weidian.com/item.html?itemID=4342873228
一、用中继器制作选择器
我们先做左边的选择器，用中继器来制作选择器，中继器内部默认自带一个矩形元件，我们按需求修改矩形的样式、和尺寸，我们需要注意的是要增加一个选中的交互样式，这样就可以通过选中变色看出已经选中了设么选项。
在中继器表格里，默认自带一列column0，在这列里我们填写选项名称，然后在底部加个边框矩形，完成后如下入所示：
然后我们在中继器增加1列，xuanzhong列，默认为空即可。这列的作用就是用于记录哪些选项被选中，我们这里制定一个规则，如果对应该xuanzhong列的值等于1就是被选中，否则就没有被选中。所以我们要在中继器每项加载时添加交互，如果选中列的值等于1，我们就用设置选中的交互，将该行选项矩形设置为真。
那如果鼠标单击选项时，我们分两种情况添加交互，如果该行xuanzhong列的值=1，那么相当于从选中变成未选中，我们直接更新当前行的xuanzhong的值为0即可；如果该行xuanzhong列的值不等于1，那么相当于从未选中变成选中，我们直接更新当前行xuanzhong列的值为1
完成之后我们还要增加一列xianshi，这列的作用是控制对应行内容是否显示。我们在中继器每项加载时增加判断条件，如果显示列的值不等于1，那么我们就用隐藏事件，隐藏该行选项。
二、制作模糊搜索效果
我们用一个输入框和搜索按钮，制作一个搜索框，如下图所示：
点击搜索按钮时，我们用筛选事件，对中继器进行筛选，筛选条件就是，中继器里第一列选项文字包含输入框里的文字，如果axure10的话可以在条件里直接选包含；如果Axure9及以下的话，就要用到indexof函数，如果得出结果大于-1就是包含的意思了。
三、复制出已选栏目
上面我们做好左边未选栏目的元件后，可以将中继器和搜索框一个复制一个到右面。复制到右面的的中继器里的xianshi列默认值要改成0，因为右面默认是没有选项的。然后在两个中继器选项点击时的两个条件，前面是更新当前行xuanzhong列的值，如果未选中就更新为1，如果选中的话就更新为0，这里我们在更新的时候要把另外一个中继器也以前更新，就是说如果选中一个选项，就两个中继器的该选项都要选中，如果取消选中该选项，就两个中继器的该选项都取消选中。
四、左右按钮穿梭的交互
点击右箭头，就是要将左边选中的选项传递到右边，那么我们只要用更新行更新两个中继器，左边的我们把xuanzhong列=1的行对应的xianshi列的值设置为0，那么左边中继器选中的行就会自动隐藏。右边的中继器我们把xuanzhong列=1的行对应的xianshi列的值设置为1，那右边中继器选中的行就会自动显示。最后我们还要把两个中继器里xuanzhong列的值恢复设置为0
那左键头其实也是一样的道理，只不过是从原来将左边选中的选项传递到右边，变成从右边选中的选项传递回左边。简单来说就是更新右面已选中行的xianzhi列值为0，这样就可以在右边的中继器里隐藏该选项；最后再更新左边中继器里选中行的xianzhi列值为1，这样就可以在左边显示了。
那么以上就是Axure高保真原型——多选穿梭框的制作教程了，感谢您的阅读，我们下期见，88~
作者：梓贤vigo；
微信公众号：Axure高保真原型，分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容
本文由微信公众号：Axure高保真原型 授权发布，未经许可，禁止转载
