编辑指南:作为产品经理，学习使用Axure是一项基本技能。本文作者分析了直放站的高级用法——下拉和多选，希望对你有所帮助，

所需组件:

中继器：2 个，一个对应标签，一个对应下拉列表；文本框：模拟下拉框；小三角：模拟下拉框的交互动作；

思路:标签和下拉列表的中继器通过文本对应来一对一更新状态值，通过状态值的变化来控制下拉列表的选择和切换以及标签的显示和排序。

一、复读机的重新选择和分配

[标签]中继器需要标签文本、标签状态和更新时间。三者的功能如下:

标签文本：在做行更新时，以此作为【下拉列表】中继器的关联；标签状态：通过标签状态值控制标签的显示（1）和隐藏（-1）；更新时间：中继器的行发生改变时，更新【更新时间】，并以更新时间作为升序排序的标准；

所以在加载【标签】中继器时，需要增加一个额外的排序，如上图所示；

[下拉列表]中继器需要选项文本和选项状态值，它们的功能如下:

选项文本：在做行更新时，以此作为与【标签】中继器的关联；选项状态：通过选项状态值控制选项背景的选中（1）和取消选中（-1）；

二、下拉选项交互设置

单击[下拉列表]中继器中的选项时，设置选项(当前组件)的选定状态(开关)；并设置在选择或取消选择选项时更新[下拉列表]中继器的选项状态(值)和[标签]中继器的标签状态(值)；

如上所示，首先，当选择[已选择]时，设置[标签]中继器的状态值:

规则：[[Item.Option==TargetItem.tag_Text]]（选项文本=标签文本）；状态值设置为：[[TargetItem.tag_State*(-1)]]（标签状态值*（-1））；更新时间设置为：[[Now.getTime()]]（获取当前时间）；

同时，将下拉列表中直放站当前线路的选项状态值更新为[[项。状态*(1)](选项状态值*(1))；

同样，当[未选中]时，设置[标签]中继器的状态值:

规则：[[Item.Option==TargetItem.tag_Text]]（选项文本=标签文本）;状态值设置为：[[TargetItem.tag_State*(-1)]]（标签状态值*（-1））;更新时间设置为：[[Now.getTime()]]（获取当前时间）；

同时，将下拉列表中直放站当前线路的选项状态值更新为[[项。状态*(1)](选项状态值*(1))；

第三，删除标签交互设置

当标签被操作删除，即点击[X]时，同样需要更新[下拉列表]中继器的选项状态(值)和[标签]中继器的标签状态(值)；

当您单击[X]时，将[标签]中继器的当前行的标签状态值设置为[[项。tag _ state *(1)](tag状态值*(1))，将更新时间设置为[[Now.getTime()]](获取当前时间)；

同时，将[Downlist]中继器的选项状态值更新为[[TargetItem]。状态*(1)](选项状态值*(1))，规则为:[[项。标签文本= =目标项目。Option]](标签文本=选项文本)；

第四，设置状态变化时的交互

当[下拉列表]中中继器的选项状态(值)发生变化时，设置选项背景的选定状态:

情景一（选中）：当状态值=“1”时，设置背景为选中状态；情景二（取消,选中）：当状态值=“-1”时，设置背景为取消选中状态；

当[标签]中继器的选项状态(值)改变时，设置标签(组)的显示和隐藏状态:

情景一（显示）：当状态值=“1”时，显示标签（组）；情景二（隐藏）：当状态值=“-1”时，隐藏标签（组）；

熟练使用中继器可以为产品人员创建更加灵活通用的组件，大大提高产品原型制作的效率和质量。欢迎大家一起讨论！