在產(chǎn)品設(shè)計中，多選下拉列表是頻繁使用的場景之一。這篇文章，我們學(xué)一下在Axure中如何制作可交互的多選下拉列表，供大家參考。

多選下拉列表是一種常見的用戶界面組件，通常用于需要讓用戶從一組選項中選擇多個項的場景。它結(jié)合了下拉菜單的簡潔性和多選功能的靈活性。

今天我們就來學(xué)習，怎么在Axure中制作多選下拉列表，并且通過輸入框來動態(tài)控制多選列表里的選項。

一、效果展示

1、點擊下拉框，可以彈窗選項列表

2、點擊選項對應(yīng)的多選按鈕可以選中或取消選中對應(yīng)的選項，已選中的選項會在下拉框中顯示對應(yīng)的標簽，并且下拉框會根據(jù)選項的多少，自動調(diào)整尺寸。

3、點擊標簽的刪除按鈕，可以取消選中該選項。

4、在輸入框里填寫提示文字，點擊更新按鈕后可以更新多選下拉列表默認的提示文本

5、在多行輸入框里填寫選項，每行對應(yīng)一個選項，填寫完成后點擊更新按鈕，可以將選項值更新到多選下拉列表里

二、制作教程

我們主要分為右側(cè)的多選下拉列表，以及左側(cè)輸入框及按鈕兩個模板

1. 多選下拉列表

多選下拉列表我們主要分為下拉框和彈出列表

1.1 彈出列表

彈出列表我們是通過中繼器制作一個多選列表，結(jié)合背景矩形而成的，中繼器里面包括多選按鈕和文本標簽和矩形，如下圖所示擺放

里面的多選按鈕，我們沒有用系統(tǒng)自帶的多選按鈕，因為想樣式更美觀，我們將它分成兩個圖標，一個是選中狀態(tài)，一個是未選中的狀態(tài)，將他們分別放入一個動態(tài)面板的兩個狀態(tài)頁中。

中繼器表格我們新增兩列，text列用于填寫選項文字，xuanzhong列控制是否選中。

然后我們將text列的值設(shè)置到文本標簽里，axure10或以上的話，點擊表格里的鏈接按鈕，選擇文本標簽元件即可；如果是axure9或以下的版本，就要在中繼器每項加載時，用設(shè)置文本的交互來實現(xiàn)。

我們要通過中繼器表格xuanzhong列里的值控制是否選中，所以我們定義，如果選中列的值等于1，那我們就選中，在這里相當于是顯示動態(tài)面板的選中頁，所以我們用設(shè)置面板狀態(tài)的交互，將動態(tài)面板設(shè)置到選中的狀態(tài)即可。

如果點擊未選中的按鈕，相當于要變成選中，所以我們用更新行的交互，將當前行xuanzhong列的值更新為1即可；同樣道理，如果點擊選中按鈕，相當于要變成未選中，所以我們用更新行的交互，將xuanzhogn列的值更新為0。

如果選項較多時，可以通過轉(zhuǎn)為動態(tài)面板，調(diào)出垂直滾動條的方式，控制列表的高度

1.2 下拉框

下拉框我們用矩形、箭頭以及中繼器制作，中繼器主要用于制作標簽，包括矩形，文本標簽和刪除按鈕，如下圖所示擺放

中繼器表格我們使用默認的column0列即可，用于顯示標簽文字

表格默認為0行，后續(xù)會通過交互，將選中的選項添加到這里。

然后我們將column0列的值設(shè)置到文本標簽里，axure10或以上的話，點擊表格里的鏈接按鈕，選擇文本標簽元件即可；如果是axure9或以下的版本，就要在中繼器每項加載時，用設(shè)置文本的交互來實現(xiàn)。另外如果文字太長，我們也可以將文本標簽轉(zhuǎn)為動態(tài)面板，通過面板控制文本顯示的長度，例如只顯示前面5個字等。

將矩形、箭頭以及中繼器組合，形狀下拉組合，鼠標單擊下拉組合時，我們用顯示的交互，將彈出列表顯示，這里我們添加一個彈出效果，這樣點擊其他空白位置，下拉列表就可以自動收起來

在彈出列表顯示時，我們也可以通過交互美化原型，例如顯示上箭頭，隱藏下箭頭，或者通過交互樣式，讓下拉框變色……這些都可以根據(jù)自身需要設(shè)置。

1.3 彈出列表和標簽的聯(lián)動

在下拉列表選項選中時，我們用添加行的交互，將選項文字添加到標簽中繼器里；

這里我們還要做一個默認還原，就是在選項列表中繼器每項加載時，如果加載的是第一行的數(shù)據(jù)，我們要先把標簽中繼器里的值清空，我們可以用標記行先標記所有行，然后用刪除行的交互，把所有行刪除，這樣就可以避免重復(fù)添加。

標簽中繼器里刪除按鈕點擊時，相當于要取消選中，因為標簽中繼器是通過彈出列表中繼器控制的，所以我們要用更新行的交互，更新彈出中繼器，和該標簽文字相同的行，將xuanzhogn列的值更新為0

這樣基本上就實現(xiàn)了兩個中繼器的聯(lián)動

最后如果標簽的下拉框需要自適應(yīng)大小，我們就要記錄選中數(shù)，然后根據(jù)選中的數(shù)量，用設(shè)置尺寸的交互設(shè)置下拉框的大小，然后再通過移動的交互，將彈窗列表移動到下拉框的下方。

如果選中數(shù)為0，就設(shè)置為默認的尺寸和位置，并且將默認提示文字設(shè)置到下拉框里，如果不為0，下拉框的高度就相當于標簽中繼器的高度+間距，然后在移動彈出列表到下拉框的下方，最后清空提示文字。

2. 左側(cè)輸入框和按鈕

包括文本標簽、輸入框、多行輸入框和按鈕構(gòu)成，如下圖所示擺放

單行輸入框，我們填寫下拉框的提示文字，多行輸入框我們輸入選項的文字，一行代表一個選項。

鼠標單擊更新按鈕時，我們用設(shè)置文本的交互，將提示文字輸入框里的文本設(shè)置到下拉框里就可以了；但是選項文字的話，我們需要進行切割處理，首先要把選項列表里所有行內(nèi)容刪除，相當于做一個清空還原。

然后在對多行輸入框的的文本進行切割處理，先把第一行的文本提取出來，然后用添加行的交互，將提取出來的文本添加到選項列表中繼器里，然后重復(fù)這個循環(huán)，多行文本輸入框里的每一行的文本都添加到選項列表中繼器里。

這樣我們就完成輸入框控制多選下拉列表的原型模板了，后續(xù)使用也很方便，默認的選項和提示文字只需要左側(cè)輸入框里填寫，預(yù)覽后即可自動生成對應(yīng)的效果。

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