之前和大家分享了?《Axure教程：單選下拉列表集合（中繼器填寫表格即可使用）》、《Axure教程：分級(jí)下拉列表》，很多同學(xué)私信我說很好使用，希望能夠做一個(gè)多選下拉列表的教程

所以今天就和大家分享怎么用中繼器制作多選下拉列表。該原型制作完成后，下次使用簡單，只需要填寫中繼器表格即可。

原型預(yù)覽：https://qu0b4r.axshare.com/

下面是多選下拉列表的效果介紹，如果想看單選或者多級(jí)下拉列表的同學(xué)可以看回我之前的文章，或者點(diǎn)擊上面原型預(yù)覽地址查看。

效果演示

1. 整體效果

2. 選中和取消選中

3. 查看全部已選中的標(biāo)簽

默認(rèn)顯示2個(gè)標(biāo)簽，鼠標(biāo)移入看查看全部標(biāo)簽

4. 刪除標(biāo)簽取消選中

5. 模糊搜索效果

6. 添加選項(xiàng)效果

7. 全選和全部取消效果

制作教程

1. 制作材料

分為幾部分，下拉框和彈出列表，如果需要搜索的話還需要搜索框、全選和取消全選的按鈕。

然后ui方面我就不詳細(xì)說了，大家根據(jù)自己的喜好完成就可以了。

2. 下拉框

如上圖所示制作成組合，分別有矩形，中繼器，箭頭符號(hào)

中間的是用中繼器來做的，默認(rèn)顯示項(xiàng)為2，鼠標(biāo)移入時(shí)不限，鼠標(biāo)移出時(shí)為2。每項(xiàng)加載時(shí)，設(shè)置文本=item.column0，默認(rèn)為空不用填，下面會(huì)說到利用彈出列表內(nèi)的中繼器把內(nèi)容導(dǎo)過來。點(diǎn)擊中繼器的X按鈕，這里并不是刪除改行，是取消彈出列表內(nèi)的中繼器對(duì)應(yīng)行的選中，簡單來說說就是這個(gè)中繼器只是內(nèi)容的顯示。

鼠標(biāo)點(diǎn)擊該組合時(shí)，切換彈出列表的可見性。然后旋轉(zhuǎn)箭頭180度，這里也可以用上下兩個(gè)箭頭，然后切換他們的可見性。

3. 彈出列表

彈出列表由背景框，內(nèi)容中繼器、搜索框全選和全部取消按鈕組成，

3.1 中部內(nèi)容中繼器

材料：文本+多選按鈕。這里系統(tǒng)的多選按鈕太丑，所以我美化了一下，具體可以看回我之前的文章《建議收藏：Axure交互常用按鈕組》

交互邏輯：

在中繼器里填寫內(nèi)容，然后每項(xiàng)加載時(shí)將內(nèi)容設(shè)置到文本。

點(diǎn)擊多選框的時(shí)候切換選中和取消，如果選中時(shí)，添加行到上面說到的下拉框標(biāo)簽中繼器，如果取消選中時(shí)，刪除下拉框標(biāo)簽中繼器對(duì)應(yīng)行。

3.2 搜索

這里這需要對(duì)中繼器做模糊搜索就可以了，需要用到index函數(shù)，對(duì)搜索框內(nèi)的輸入的內(nèi)容進(jìn)行篩選。具體公式[[Item.text.indexOf(LVAR1)>-1]]，item.text就是中繼器表格的內(nèi)容列，LVAR1是文本框輸入內(nèi)容。

3.3 全選和全部取消

這個(gè)很簡單，鼠標(biāo)單擊全選時(shí)，讓中繼器內(nèi)所有行都選中；鼠標(biāo)單擊全部取消時(shí)，讓中繼器內(nèi)所有行都取消去選中

今天的分享到這里就結(jié)束了，喜歡原型或者有疑問的小伙伴們可以在下方評(píng)論處給我留言哦，我們下期見。

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

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