多選下拉列表可以用于展示可選標(biāo)簽，并允許用戶選擇多個標(biāo)簽，那么該如何利用Axure里用中繼器制作一個多選下拉列表。作者總結(jié)了相關(guān)步驟，希望對你有所幫助。

多選下拉列表常用于需要用戶從一組選項中選擇多個選項的情況。它提供了一個下拉菜單，用戶可以點擊展開并選擇他們感興趣的多個選項。多選下拉列表可以用于展示可選標(biāo)簽，并允許用戶選擇多個標(biāo)簽。例如，在一個博客發(fā)布界面上，可以使用多選下拉列表選擇適用的標(biāo)簽。

所以今天就教大家在Axure里如果用中繼器制作一個多選下拉列表，并且根據(jù)已選項自動生成標(biāo)簽的原型模板。

一、效果展示

1、點擊下拉列表框可以彈出選項，點擊選項可以選中選項或者取消選中

2、根據(jù)已選內(nèi)容自動顯示對應(yīng)的標(biāo)簽，并且根據(jù)標(biāo)簽數(shù)量自動調(diào)整下拉框的尺寸

3、取消選中時，對應(yīng)標(biāo)簽自動刪除，也可以點擊標(biāo)簽里的刪除按鈕刪除并取消選中

4、選項信息可以在中繼器表格里維護(hù)，選項較多時，可以通過滾動條上下查看選項

二、制作教程

1. 用中繼器制作選項

我們新增一個中繼器，在中繼器里添加文本標(biāo)簽，背景矩形，以及多選按鈕，這里我們因為想自定義多選按鈕的樣式，所以我們沒有用系統(tǒng)多選按鈕，我們用動態(tài)面板來制作，增加兩個狀態(tài)，一個是未選中狀態(tài)，一個是選中的狀態(tài)，分別導(dǎo)入選中和未選中的多選按鈕的素材。

當(dāng)然你們也可以用系統(tǒng)的多選按鈕來制作，分別將他們放入兩個狀態(tài)里，但是需要用個熱區(qū)擋住他，因為后續(xù)是否選中是通過中繼器里的值控制的，并不是通過點擊直接改變的。如下圖所示擺放：

中繼器表格里我們增加兩列：

1. text列：在該列添加選項名，有幾個選項就填寫幾行
2. xuanzhong列：用來控制對應(yīng)行的選項是否被選擇，一般如果默認(rèn)沒有選中項的話，不填即可，如果項默認(rèn)某個選項選中，就在該選項xuanzhong列的值填寫1

在中繼器每項載入時，我們首先用設(shè)置文本的交互，將text列選項的值設(shè)置到文本標(biāo)簽里。

然后我們還要根據(jù)xuanzhong列的值來設(shè)置動態(tài)面板是選中還是未選中的狀態(tài)。如果xuanzhong列的值等于1，那么我們用將動態(tài)面板設(shè)置到選中狀態(tài)；如果不等于1，我們就設(shè)置到未選中的狀態(tài)，不過這里不等于1的情況可以不用寫，因為他默認(rèn)就是未選中的狀態(tài)。

2. 鼠標(biāo)單擊選項時的交互

鼠標(biāo)單擊選項時，我們要根據(jù)判斷該選項是否已經(jīng)被選中，如果已被選中，我們就將他設(shè)置為未選中，因為控制他是否選中是通過中繼器里選中列的值來控制的，所以我們用更新行的交互，將中繼器里xuanzhong列的值更新為0即可；如果未被選中，我們就將他設(shè)置為選中，用更新行的交互，將中繼器里xuanzhong列的值更新為1即可。

3. 將中繼器轉(zhuǎn)為動態(tài)面板

這樣我們就基本完成了下拉選項，如果選項較多，這個選項就會很常，所以我們把它轉(zhuǎn)為動態(tài)面板，取消面板自適應(yīng)尺寸，并且調(diào)出垂直滾動條，這樣就可以控制顯示選項的尺寸，在選項較多時，還可以上下滾動查看更多選項。

如果覺得系統(tǒng)的滾動條不太好看的話，我們還可以通過再次轉(zhuǎn)為動態(tài)面板，然后用外面板遮擋住大部分或全部內(nèi)面板的滾動條，這樣去美化一下。

然后我們在底部增加一個背景矩形，將他們組合在一起，這樣下拉選項就做好了。

4. 下拉框的制作

下拉框我們需要用到矩形，上下箭頭，以及中繼器標(biāo)簽組。

鼠標(biāo)單擊這個組合時，我們用顯示的交互，將下拉選項顯示出來，這個我們可以選擇燈箱效果，這樣點擊其他空白的地方，下拉選項就可以自動收起來。

當(dāng)然我們也可以增加一些交互樣式讓他更加美化，增加矩形選中和禁用樣式，鼠標(biāo)移入移出或者下拉選項顯示隱藏時，觸發(fā)這些樣式，因為每個人審美不一樣，這些你們自行處理即可。

4. 中繼器標(biāo)簽組

前面說到下拉框組合里需要有一個中繼器標(biāo)簽組，我們現(xiàn)在來制作。

需要再中繼器里增加背景矩形，文字標(biāo)簽和刪除按鈕，文字標(biāo)簽我們轉(zhuǎn)為動態(tài)面板，因為考慮到有些選項太長，我們就自顯示前面部分即可。如下圖所示擺放即可。

中繼器表格里不需要修改，用自帶的Column0列即可，默認(rèn)中繼器表格為空。中繼器布局為水平，按網(wǎng)格排布，案例中是每行項目數(shù)是2。

在中繼器每項加載時，我們用設(shè)置文本的交互，將Column0列的值設(shè)置到文本標(biāo)簽里。

這樣標(biāo)簽組就只做完成了。

5. 選項和標(biāo)簽的聯(lián)動

接下來我們要讓選項和標(biāo)簽進(jìn)行聯(lián)動，在選項中繼器里，該選項被選中，我們就用添加行的交互，將該選項的選項值增加的標(biāo)簽中繼器里。這里需要注意的是，因為中繼器每次更新都會從頭加載，所以在一開始如果直接添加行的話，選第二個選項之后，就會發(fā)現(xiàn)之前第一次添加的標(biāo)簽，重復(fù)添加了。

所以我們在一開始的時候，要對標(biāo)簽中繼器做一個還原的操作，我們可以用刪除所有行的方式，讓選中之前的標(biāo)簽中繼器處于一個原始為空的狀態(tài)。

我們要刪除標(biāo)簽的話，我們也不是用刪除行的方式，刪除標(biāo)簽里對應(yīng)的行。因為我們是通過下拉選項中繼器里的值來控制具體顯示的標(biāo)簽，所以如果我們想讓標(biāo)簽刪除，我們就用更新行的交互，將和標(biāo)簽名稱一樣的行的xuanzhong列的值更新為0，這樣就可以把標(biāo)簽刪除。

這樣我們就基本完成了，但是我們還需要考慮標(biāo)簽太多的情況。

6. 設(shè)置下拉框的尺寸

我們可以根據(jù)標(biāo)簽中繼器的尺寸，來設(shè)置外框的尺寸。

當(dāng)所有標(biāo)簽加載完成后，我們用設(shè)置尺寸的交互，首先設(shè)置下拉框的尺寸，寬度保持不變，高度就是標(biāo)簽組的高度+上下的邊距，這樣就可以外框就可以變高。

同事我們還要用移動的事件，移動下拉選項組合，移動到下拉框的底部，這樣就可以根據(jù)標(biāo)簽的多少，自動調(diào)整下拉框的尺寸。

這樣我們就完成了多選下拉列表（自動生成標(biāo)簽）原型模板的制作了，下次使用也很方便，我們只需要在下拉選項中繼器表格里填寫選項值，即可自動生成交互效果。

那以上就是本期教程的全部內(nèi)容，感興趣的同學(xué)們可以動手試試哦，感謝您的閱讀，我們下期見。