如何使用Axure制作动态交互的下拉多选器组件？相信Web设计中多选器时长会在页面元素中被使用，产品原型制作为了更加流畅的说明需求，需要追求原型的高保真交互性，能让领导、客户还有开发人员清楚的知道功能，然而制作这样的原型并不简单，往往一个高保真可复用的组件需要花费很长的制作时间。本文将详细介绍如何通过Axure制作下拉多选器组件。
一、案例预览
预览地址： https://idn9x0.axshare.com
实现效果：
1、下拉选项超过固定高度可滚动显示；
2、选中状态时边框高亮，且选项实现鼠标悬停和选中时交互样式；
3、下拉框箭头图标根据状态切换，选中后可删除已选项；
4、选项选中后在选择框中显示选项标签；
5、每个选项标签的删除图标点击之后可取消选择。
二、设计思路
1. 选择框
选择框使用矩形；内部使用文本框作为提示；右侧使用向下箭头图标；选中选项回显使用中继器，每项可删除。
2. 下拉选项
下拉选项为了后期方便修改和复用，使用中继器；外层使用动态面板控制下拉框显示范围。定义好中继器的数据结构，这通常包括几个关键的字段，option（选项文本）、`checked`（选中状态，0-未选中，1-已选中）
3、交互设置
需要设置的交互有：选择框单击时、下拉选项中继器每项加载时、下拉选项单击时、选中选项中继器每项加载时、选中选项删除按钮单击时。
三、重要步骤
1. 创建选择框
拖入矩形和文本框作为选择框容器，箭头图标作为下拉标识。
2. 创建下拉选择弹框
拖入一个矩形，作为下拉选择弹框，可自行设置样式。
3、设置选择框和下拉选择弹框的交互
当选择框单击时设置下拉选择弹框显示，下拉标识旋转至向上角度。
当下拉选择弹框隐藏时设置，下拉标识旋转至向下角度。
4、创建下拉选项中继器
拖入一个中继器，定义中继器列"option"、"checked",并添加一些选项数据。
5、设置下拉选项中继器的交互
设置中继器每项加载时交互，这里主要是控制选项的选中效果。
6、创建回显已选项中继器
可以直接复制下拉选项中继器，改变布局方式为水平。
7、设置回显已选项中继器的交互
设置中继器每项加载时交互，这里主要是已选项的显示以及矩形的动态宽度等。
点击选项删除图标时，改变两个中继器的数据列"checked"值的改变。
8、设置下拉选项中继器的选项单击时交互
当下拉选项点击时，设置两个中继器的数据列"checked"值的改变。
友情提示： 该组件已上传CSDN，有需要可查看文章头部资源地址下载。
--- End·往期推荐---
Axure移动端高保真动态交互元件库：加速原型设计的全能工具箱-CSDN博客
数据可视化大屏产品设计方案（附Axure源文件预览）-CSDN博客