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

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

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

一、效果展示

1、點(diǎn)擊下拉框，可以彈窗選項(xiàng)列表

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

3、點(diǎn)擊標(biāo)簽的刪除按鈕，可以取消選中該選項(xiàng)。

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

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

二、制作教程

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

1. 多選下拉列表

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

1.1 彈出列表

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

里面的多選按鈕，我們沒有用系統(tǒng)自帶的多選按鈕，因?yàn)橄霕邮礁烙^，我們將它分成兩個(gè)圖標(biāo)，一個(gè)是選中狀態(tài)，一個(gè)是未選中的狀態(tài)，將他們分別放入一個(gè)動(dòng)態(tài)面板的兩個(gè)狀態(tài)頁(yè)中。

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

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

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

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

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

1.2 下拉框

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

中繼器表格我們使用默認(rèn)的column0列即可，用于顯示標(biāo)簽文字

表格默認(rèn)為0行，后續(xù)會(huì)通過(guò)交互，將選中的選項(xiàng)添加到這里。

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

將矩形、箭頭以及中繼器組合，形狀下拉組合，鼠標(biāo)單擊下拉組合時(shí)，我們用顯示的交互，將彈出列表顯示，這里我們添加一個(gè)彈出效果，這樣點(diǎn)擊其他空白位置，下拉列表就可以自動(dòng)收起來(lái)

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

1.3 彈出列表和標(biāo)簽的聯(lián)動(dòng)

在下拉列表選項(xiàng)選中時(shí)，我們用添加行的交互，將選項(xiàng)文字添加到標(biāo)簽中繼器里；

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

標(biāo)簽中繼器里刪除按鈕點(diǎn)擊時(shí)，相當(dāng)于要取消選中，因?yàn)闃?biāo)簽中繼器是通過(guò)彈出列表中繼器控制的，所以我們要用更新行的交互，更新彈出中繼器，和該標(biāo)簽文字相同的行，將xuanzhogn列的值更新為0

這樣基本上就實(shí)現(xiàn)了兩個(gè)中繼器的聯(lián)動(dòng)

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

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

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

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

單行輸入框，我們填寫下拉框的提示文字，多行輸入框我們輸入選項(xiàng)的文字，一行代表一個(gè)選項(xiàng)。

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

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

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

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