編輯導讀：作為一個產(chǎn)品經(jīng)理，學會使用Axure 是一個基礎(chǔ)技能。本文作者分析了中繼器高級用法——下拉多選的做法，希望對你有幫助，

原型展示：https://lrj5vq.axshare.com

所需元件：

• 中繼器：2 個，一個對應標簽，一個對應下拉列表；
• 文本框：模擬下拉框；
• 小三角：模擬下拉框的交互動作；

思路：標簽和下拉列表的中繼器通過文本對應進行狀態(tài)值的一對一的更新，并通過狀態(tài)值的變化控制下拉列表的選中切換和標簽的顯示和排序。

一、中繼器的復選賦值

【標簽】中繼器，需要標簽文本、標簽狀態(tài)、更新時間，三者的作用分別如下：

• 標簽文本：在做行更新時，以此作為【下拉列表】中繼器的關(guān)聯(lián)；
• 標簽狀態(tài)：通過標簽狀態(tài)值控制標簽的顯示（1）和隱藏（-1）；
• 更新時間：中繼器的行發(fā)生改變時，更新【更新時間】，并以更新時間作為升序排序的標準；

因此在載入【標簽】中繼器時，需要額外增加一個排序如上圖所示；

【下拉列表】中繼器，需要選項文本和選項狀態(tài)值，兩者的作用如下：

• 選項文本：在做行更新時，以此作為與【標簽】中繼器的關(guān)聯(lián)；
• 選項狀態(tài)：通過選項狀態(tài)值控制選項背景的選中（1）和取消選中（-1）；

二、下拉選項交互設(shè)置

在點擊【下拉列表】中繼器中的選項時，設(shè)置選項（當前組件）的選中狀態(tài)（切換）；并設(shè)置當選項被選中或取消選中時，更新【下拉列表】中繼器的選項狀態(tài)（值）和【標簽】中繼器的標簽狀態(tài)（值）；

如上圖，首先是【選中】時，設(shè)置【標簽】中繼器的狀態(tài)值：

• 規(guī)則：[[Item.Option==TargetItem.tag_Text]]（選項文本=標簽文本）；
• 狀態(tài)值設(shè)置為：[[TargetItem.tag_State*(-1)]]（標簽狀態(tài)值*（-1））；
• 更新時間設(shè)置為：[[Now.getTime()]]（獲取當前時間）；

同時更新【下拉列表】中繼器當前行的選項狀態(tài)值為：[[Item.State*(-1)]]（選項狀態(tài)值*（-1））；

同理，在【取消選中】時，設(shè)置【標簽】中繼器的狀態(tài)值：

• 規(guī)則：[[Item.Option==TargetItem.tag_Text]]（選項文本=標簽文本）;
• 狀態(tài)值設(shè)置為：[[TargetItem.tag_State*(-1)]]（標簽狀態(tài)值*（-1））;
• 更新時間設(shè)置為：[[Now.getTime()]]（獲取當前時間）；

同時更新【下拉列表】中繼器當前行的選項狀態(tài)值為：[[Item.State*(-1)]]（選項狀態(tài)值*（-1））；

三、刪除標簽交互設(shè)置

當操作刪除標簽，即點擊【X】時，同理，需要更新【下拉列表】中繼器的選項狀態(tài)（值）和【標簽】中繼器的標簽狀態(tài)（值）；

點擊【X】時，設(shè)置【標簽】中繼器當前行的標簽狀態(tài)值為：[[Item.tag_State*(-1)]]（標簽狀態(tài)值*（-1）），設(shè)置更新時間為：[[Now.getTime()]]（獲取當前時間）；

同時，更新【下來列表】中繼器的選項狀態(tài)值為：[[TargetItem.State*(-1)]]（選項狀態(tài)值*（-1）），規(guī)則為：[[Item.tag_Text==TargetItem.Option]]（標簽文本=選項文本）；

四、設(shè)置狀態(tài)變化時的交互

當【下拉列表】中繼器的選項狀態(tài)（值）發(fā)生變化時，設(shè)置選項背景的選中狀態(tài)：

• 情景一（選中）：當狀態(tài)值=“1”時，設(shè)置背景為選中狀態(tài)；
• 情景二（取消選中）：當狀態(tài)值=“-1”時，設(shè)置背景為取消選中狀態(tài)；

當【標簽】中繼器的選項狀態(tài)（值）發(fā)生變化時，設(shè)置標簽（組）的顯隱狀態(tài)：

• 情景一（顯示）：當狀態(tài)值=“1”時，顯示標簽（組）；
• 情景二（隱藏）：當狀態(tài)值=“-1”時，隱藏標簽（組）；

本文由@Sam 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash, 基于CC0協(xié)議。