多選下拉清單可以用于展示可選标簽，并允許使用者選擇多個标簽，那麼該如何利用Axure裡用中繼器制作一個多選下拉清單。作者總結了相關步驟，希望對你有所幫助。
多選下拉清單常用于需要使用者從一組選項中選擇多個選項的情況。它提供了一個下拉菜單，使用者可以點選展開并選擇他們感興趣的多個選項。多選下拉清單可以用于展示可選标簽，并允許使用者選擇多個标簽。例如，在一個部落格釋出界面上，可以使用多選下拉清單選擇适用的标簽。
是以今天就教大家在Axure裡如果用中繼器制作一個多選下拉清單，并且根據已選項自動生成标簽的原型模闆。
一、效果展示
1、點選下拉清單框可以彈出選項，點選選項可以選中選項或者取消選中
2、根據已選内容自動顯示對應的标簽，并且根據标簽數量自動調整下拉框的尺寸
3、取消選中時，對應标簽自動删除，也可以點選标簽裡的删除按鈕删除并取消選中
4、選項資訊可以在中繼器表格裡維護，選項較多時，可以通過滾動條上下檢視選項
原型位址：https://g8a5mh.axshare.com/#g=1
二、制作教程
1. 用中繼器制作選項
我們新增一個中繼器，在中繼器裡添加文本标簽，背景矩形，以及多選按鈕，這裡我們因為想自定義多選按鈕的樣式，是以我們沒有用系統多選按鈕，我們用動态面闆來制作，增加兩個狀态，一個是未選中狀态，一個是選中的狀态，分别導入選中和未選中的多選按鈕的素材。
當然你們也可以用系統的多選按鈕來制作，分别将他們放入兩個狀态裡，但是需要用個熱區擋住他，因為後續是否選中是通過中繼器裡的值控制的，并不是通過點選直接改變的。如下圖所示擺放：
中繼器表格裡我們增加兩列：
- text列：在該列添加選項名，有幾個選項就填寫幾行
- xuanzhong列：用來控制對應行的選項是否被選擇，一般如果預設沒有選中項的話，不填即可，如果項預設某個選項選中，就在該選項xuanzhong列的值填寫1
在中繼器每項載入時，我們首先用設定文本的互動，将text列選項的值設定到文本标簽裡。
然後我們還要根據xuanzhong列的值來設定動态面闆是選中還是未選中的狀态。如果xuanzhong列的值等于1，那麼我們用将動态面闆設定到選中狀态；如果不等于1，我們就設定到未選中的狀态，不過這裡不等于1的情況可以不用寫，因為他預設就是未選中的狀态。
2. 滑鼠單擊選項時的互動
滑鼠單擊選項時，我們要根據判斷該選項是否已經被選中，如果已被選中，我們就将他設定為未選中，因為控制他是否選中是通過中繼器裡選中列的值來控制的，是以我們用更新行的互動，将中繼器裡xuanzhong列的值更新為0即可；如果未被選中，我們就将他設定為選中，用更新行的互動，将中繼器裡xuanzhong列的值更新為1即可。
3. 将中繼器轉為動态面闆
這樣我們就基本完成了下拉選項，如果選項較多，這個選項就會很常，是以我們把它轉為動态面闆，取消面闆自适應尺寸，并且調出垂直滾動條，這樣就可以控制顯示選項的尺寸，在選項較多時，還可以上下滾動檢視更多選項。
如果覺得系統的滾動條不太好看的話，我們還可以通過再次轉為動态面闆，然後用外面闆遮擋住大部分或全部内面闆的滾動條，這樣去美化一下。
然後我們在底部增加一個背景矩形，将他們組合在一起，這樣下拉選項就做好了。
4. 下拉框的制作
下拉框我們需要用到矩形，上下箭頭，以及中繼器标簽組。
滑鼠單擊這個組合時，我們用顯示的互動，将下拉選項顯示出來，這個我們可以選擇燈箱效果，這樣點選其他空白的地方，下拉選項就可以自動收起來。
當然我們也可以增加一些互動樣式讓他更加美化，增加矩形選中和禁用樣式，滑鼠移入移出或者下拉選項顯示隐藏時，觸發這些樣式，因為每個人審美不一樣，這些你們自行處理即可。
4. 中繼器标簽組
前面說到下拉框組合裡需要有一個中繼器标簽組，我們現在來制作。
需要再中繼器裡增加背景矩形，文字标簽和删除按鈕，文字标簽我們轉為動态面闆，因為考慮到有些選項太長，我們就自顯示前面部分即可。如下圖所示擺放即可。
中繼器表格裡不需要修改，用自帶的Column0列即可，預設中繼器表格為空。中繼器布局為水準，按網格排布，案例中是每行項目數是2。
在中繼器每項加載時，我們用設定文本的互動，将Column0列的值設定到文本标簽裡。
這樣标簽組就隻做完成了。
5. 選項和标簽的關聯
接下來我們要讓選項和标簽進行關聯，在選項中繼器裡，該選項被選中，我們就用添加行的互動，将該選項的選項值增加的标簽中繼器裡。這裡需要注意的是，因為中繼器每次更新都會從頭加載，是以在一開始如果直接添加行的話，選第二個選項之後，就會發現之前第一次添加的标簽，重複添加了。
是以我們在一開始的時候，要對标簽中繼器做一個還原的操作，我們可以用删除所有行的方式，讓選中之前的标簽中繼器處于一個原始為空的狀态。
我們要删除标簽的話，我們也不是用删除行的方式，删除标簽裡對應的行。因為我們是通過下拉選項中繼器裡的值來控制具體顯示的标簽，是以如果我們想讓标簽删除，我們就用更新行的互動，将和标簽名稱一樣的行的xuanzhong列的值更新為0，這樣就可以把标簽删除。
這樣我們就基本完成了，但是我們還需要考慮标簽太多的情況。
6. 設定下拉框的尺寸
我們可以根據标簽中繼器的尺寸，來設定外框的尺寸。
當所有标簽加載完成後，我們用設定尺寸的互動，首先設定下拉框的尺寸，寬度保持不變，高度就是标簽組的高度+上下的邊距，這樣就可以外框就可以變高。
同僚我們還要用移動的事件，移動下拉選項組合，移動到下拉框的底部，這樣就可以根據标簽的多少，自動調整下拉框的尺寸。
這樣我們就完成了多選下拉清單（自動生成标簽）原型模闆的制作了，下次使用也很友善，我們隻需要在下拉選項中繼器表格裡填寫選項值，即可自動生成互動效果。
那以上就是本期教程的全部内容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。
本文由 @AI産品人 原創釋出于人人都是産品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協定
該文觀點僅代表作者本人，人人都是産品經理平台僅提供資訊存儲空間服務。