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

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

原型預覽：https://qu0b4r.axshare.com/

下面是多選下拉列表的效果介紹，如果想看單選或者多級下拉列表的同學可以看回我之前的文章，或者點擊上面原型預覽地址查看。

效果演示

1. 整體效果

2. 選中和取消選中

3. 查看全部已選中的標簽

默認顯示2個標簽，鼠標移入看查看全部標簽

4. 刪除標簽取消選中

5. 模糊搜索效果

6. 添加選項效果

7. 全選和全部取消效果

制作教程

1. 制作材料

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

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

2. 下拉框

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

中間的是用中繼器來做的，默認顯示項為2，鼠標移入時不限，鼠標移出時為2。每項加載時，設置文本=item.column0，默認為空不用填，下面會說到利用彈出列表內的中繼器把內容導過來。點擊中繼器的X按鈕，這里并不是刪除改行，是取消彈出列表內的中繼器對應行的選中，簡單來說說就是這個中繼器只是內容的顯示。

鼠標點擊該組合時，切換彈出列表的可見性。然后旋轉箭頭180度，這里也可以用上下兩個箭頭，然后切換他們的可見性。

3. 彈出列表

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

3.1 中部內容中繼器

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

交互邏輯：

在中繼器里填寫內容，然后每項加載時將內容設置到文本。

點擊多選框的時候切換選中和取消，如果選中時，添加行到上面說到的下拉框標簽中繼器，如果取消選中時，刪除下拉框標簽中繼器對應行。

3.2 搜索

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

3.3 全選和全部取消

這個很簡單，鼠標單擊全選時，讓中繼器內所有行都選中；鼠標單擊全部取消時，讓中繼器內所有行都取消去選中

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

本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash，基于CC0協議