編輯導(dǎo)語：分級下拉列表不僅可以節(jié)省輸入效率，還可以保證數(shù)據(jù)規(guī)范性。本文作者以二級多選下拉列表為例，分析如何在Axure中制作分級多選下拉列表，一起來學(xué)習一下吧。

分級下拉列表是系統(tǒng)頁面常用的元件，既可以節(jié)省輸入效率，還可以保證數(shù)據(jù)規(guī)范性。所以作者今天就教大家如何在Axure中制作分級多選下拉列表，本教程以二級多選下拉列表為案例。

一、制作完成后應(yīng)具備以下效果

1. 可以根據(jù)一級選擇，顯示對應(yīng)的二級內(nèi)容。例如我們選擇品牌為華為，那么二級顯示的就是所有華為的產(chǎn)品。
2. 一級選擇有三種狀態(tài)：全選、半選和未選，可以根據(jù)二級選中的情況自動反選。例如我們選擇的華為所有型號的產(chǎn)品，這時在華為就顯示全選，如果選擇了部分華為產(chǎn)品，華為就顯示半選，如果為選中華為產(chǎn)品，華為就顯示未選。
3. 可以快速全選和全部取消。例如，點擊華為，可以快速全部選中華為下全部產(chǎn)品型號，再次點擊就全部取消。
4. 選項內(nèi)容不是寫死，我們使用中繼器制作，在中繼器表格里填寫選項后，自動生成交互效果。

二、重點難點和制作思路講解

難點1：一級選項和二級選項是在連個中繼器內(nèi)，所以相當于要做連個中繼器之間的聯(lián)動交互，這對Axure的初學(xué)者來說會有一定的難度。

難點2：需要要進行反選和半選，就涉及到如何統(tǒng)計該一級選項下的二級選項的選中數(shù)。

簡單談一下制作的思路，其實就是通過兩個中繼器，點擊一級選項時，對二級選項進行篩選，在二級選項中只顯示該一級選項對應(yīng)的二級選項，再通過值來控制一二級選項的選中狀態(tài)。

在點擊一級選項全選或取消全選時，通過更新行更新二級選擇中繼器里的值，從而改變二級選項的選中狀態(tài)。

在點擊二級選項選中或者取消選中時，先統(tǒng)計選中個數(shù)和中繼器可見行數(shù)比較，從而判斷該品牌下的產(chǎn)品型號是已經(jīng)全選、部分選中還是一個沒有選中。

根據(jù)不同的情況，用更新行的交互，更新一級中繼器內(nèi)的值，從而控制一級選項的全選、半選或者未選。

三、主要的制作材料

我們可以分成3部分。

1. 頂部內(nèi)容

主要是用矩形和箭頭組成的，具體演示可以根據(jù)你們的需要設(shè)置，這里就是未顯示具體選項列表的情況。

2. 一級選項

主要是由中繼器和矩形制作而成，矩形只是用作背景，為了美觀。

中繼器內(nèi)部元件：

• 全選圖標、半選圖標、未選圖標，將這三個圖標分別放入動態(tài)面板的三個狀態(tài)內(nèi)，未選圖標的狀態(tài)默認在最前
• 文字：用于顯示選項文字，需要設(shè)置選中樣式和禁用樣式，后續(xù)用于制作移入和選擇后的變色效果
• 背景矩形：用于制作移入和選擇后的變色效果。所以這里要設(shè)置元件的選中樣式和禁用樣式
• 右箭頭

中繼器表格：

• 需要設(shè)置三列，分別為text、jinyong、和xuanzhong
• text列填寫一級選項的文字
• jinyong列默認為空，后續(xù)會通過交互，做點擊選擇后變色的效果
• xuanzhong列默認為空，就是未選中的狀態(tài)，后續(xù)會通過交互來控制半選、全選還是未選

3. 二級選項

二級選項和一級選項的元件基本一致，可以直接復(fù)制一級的來使用。

• 全選圖標、未選圖標，將這2個圖標分別放入動態(tài)面板的2個狀態(tài)內(nèi)，未選圖標的狀態(tài)默認在最前。這里因為二級已經(jīng)是最后一級，所以不需要半選。
• 文字：用于顯示選項文字，需要設(shè)置選中樣式和禁用樣式，后續(xù)用于制作移入和選擇后的變色效果。
• 背景矩形：用于制作移入和選擇后的變色效果，所以這里要設(shè)置元件的選中樣式和禁用樣式。

中繼器表格：

• 和前面的中繼器相比，需要多設(shè)置一列，用來記錄是該二級選項對應(yīng)的一級選項
• text1列，填寫一級選項的文字
• text2列，填寫2級選項的文字
• jinyong列默認為空，后續(xù)會通過交互，做點擊選擇后變色的效果
• xuanzhong列默認為空，就是未選中的狀態(tài)，后續(xù)會通過交互來控制全選還是未選

二級選項默認隱藏。

四、交互制作

1. 一級中繼器每項加載時

設(shè)置文本：將text列的選項值設(shè)置到文字矩形內(nèi)。

禁用：如果該行禁用列的值為1（后續(xù)交互實現(xiàn)），就禁用背景矩形和文字，因為前面設(shè)置了禁用樣式，這樣就可以根據(jù)鼠標點擊的內(nèi)容進行變色。

設(shè)置面板狀態(tài)：如果該行xuanzhong列的值為全選，設(shè)置面板狀態(tài)為全選，如果是半選，就設(shè)置面板狀態(tài)到半選。

2. 一級中繼器內(nèi)文字元件鼠標單擊時交互

首先是標記一級中繼器內(nèi)所有行，然后更新所有行的jinyong列的值為0，這個操作相當于重置。因為上面每項加載時設(shè)置了如果值等于1，就會變色，這樣相當于讓所有行恢復(fù)原來的狀態(tài)。

完成上面操作之后，我們就更新當前行jinyong列的值為1，這樣相當于讓當前行變色，就可以看出我們在查看哪一選項的內(nèi)容。

然后我們用顯示的交互，顯示二級選項組合。

最后再用添加篩選的交互，對二級中繼器內(nèi)的選項進行篩選，篩選條件為當前中繼器text列的值等于二級中繼器text1列的值。

3. 一級中繼器內(nèi)文字元件鼠標移入移除是交互

這個其實只是為了更加美觀，有沒有并不影響，就是設(shè)置鼠標移到對應(yīng)行有一個變色效果，因為我們前面設(shè)置了文字和背景矩形有選中樣式，所以這里我們只需要鼠標移入是，選中文字和背景矩形，鼠標移出時，取消選中即可。

4. 二級中繼器每項加載時

其實和前面1級中繼器每項加載時的交互差不多，只不過設(shè)置文本的列不同，一級需要記錄選中的個數(shù)。

設(shè)置文本：將text2列的選項值設(shè)置到文字矩形內(nèi)。

禁用：如果該行禁用列的值為1（后續(xù)交互實現(xiàn)），就禁用背景矩形和文字，因為前面設(shè)置了禁用樣式，這樣就可以根據(jù)鼠標點擊的內(nèi)容進行變色。

設(shè)置面板狀態(tài)：如果該行xuanzhong列的值為1，設(shè)置面板狀態(tài)為全選，這里和上面有點不一樣，因為這里我們后續(xù)需要計算有多少個選項被選中，所以我們直接用1比較方便。

設(shè)置文本值：這里我們需要加一個文本，默認為0，第一行加載時設(shè)置為0，如果該行xuanzhong列的值為1，就設(shè)置文本值為他原來的值+1，這樣就可以記錄選中了多少個選項。

5. 一級中繼器內(nèi)未選圖標鼠標單擊時

更新行——因為是未選，點擊之后相當于要選中，所以我們首先更新當前行為xuanzhong列的值為全選。

然后我們還要更新2級中繼器里text1列的值和當前選項的值一樣的行，所以這里更新條件就是Item.text==TargetItem.text1，更新xuanzhogn列的值為1。

最后觸發(fā)文字內(nèi)容鼠標單擊時的交互，這樣相當于點擊了文字標簽，根據(jù)上面的交互就會變色，并且在中繼器2中篩選出對應(yīng)的內(nèi)容。

6. 一級中繼器內(nèi)半選圖標鼠標單擊時

半選和未選的邏輯是一樣的，都是點擊全選，所以我們直接復(fù)制上面未選的交互過來即可。

7. 一級中繼器內(nèi)全選圖標鼠標單擊時

這和前面基本就是相反的，只需要將選中變成未選中即可。

更新行——因為是已選，點擊之后相當于要取消選中，所以我們首先更新當前行為xuanzhong列的值為未選。

然后我們還要更新2級中繼器里text1列的值和當前選項的值一樣的行，所以這里更新條件就是Item.text==TargetItem.text1，更新xuanzhogn列的值為0。

最后觸發(fā)文字內(nèi)容鼠標單擊時的交互，這樣相當于點擊了文字標簽，根據(jù)上面的交互就會變色，并且在中繼器2中篩選出對應(yīng)的內(nèi)容。

8. 2級中繼器內(nèi)未選圖標鼠標單擊時

更新行——因為是未選，點擊之后相當于要選中，所以我們首先更新當前行為xuanzhong列的值為1，這樣就相當于選中了。

我們記錄一下text1的值，因為下面需要根據(jù)條件來更新中繼器1和text1一樣的行，然后觸發(fā)文字內(nèi)容鼠標單擊時的交互，這樣相當于點擊了文字標簽，根據(jù)上面的交互就會變色。

接下來我們還需要根據(jù)條件來判斷：

第一種條件是：中繼器可視行數(shù)等于選中數(shù)量，可視行數(shù)我們用visibleItemCount函數(shù)就可以獲取，選中數(shù)量就是二級中繼器每項加載時記錄xuanzhong列的值。如果符合該條件，就是全部都選中了，這樣我們一級中繼器對應(yīng)行的xuanzhong列的值為全選。

如果上面的情況不成立，選中數(shù)量數(shù)量>0，相當于只選中了一部分的選項，這是我們就更新一級中繼器對應(yīng)行的xuanzhong列的值為半選。

最后一種情況就是，如果選中數(shù)量數(shù)量=0，相當于一個都沒有選中，這是我們就更新一級中繼器對應(yīng)行的xuanzhong列的值為未選。

注意：其實這種情況在改交互里面是不存在，因為，我們現(xiàn)在點擊的是未選按鈕，那當前行肯定會變成已選，那就是至少等于1。那為什么我要把這個條件也寫在這里，主要目的是為了后面點擊全選按鈕的交互可以直接使用。

9. 2級中繼器內(nèi)全選圖標鼠標單擊時

更新行——因為是群宣，點擊之后相當于要取消選中，所以我們首先更新當前行為xuanzhong列的值為0，這樣就相當于未選中了。

同樣，我們記錄一下text1的值，因為下面需要根據(jù)條件來更新中繼器1和text1一樣的行，然后觸發(fā)文字內(nèi)容鼠標單擊時的交互，這樣相當于點擊了文字標簽，根據(jù)上面的交互就會變色。

最后就是條件判斷，和上面那3個條件是一樣的，所以我們可以做一個隱藏的按鈕，把交互復(fù)制在里面，然后做一個觸發(fā)事件就可以了，這樣兩邊都可以使用。

10. 頂部組合鼠標單擊時

這里很簡單，我們點擊頂部組合其實就要顯示下拉列表，所以我們把一二級選項組合合并在一起，然后用顯示的交互，顯示即可，這里主要我們可以選擇燈箱效果，燈箱顏色為透明，這樣點擊空白的地方就會自動收起。

11. 其他交互

其他交互主要是影響美觀的一些交互，和改原型主要邏輯沒太大關(guān)系，例如移入時變色效果，選項彈出時顯示上箭頭、隱藏下箭頭……你們可以根據(jù)實際需要設(shè)置。

這樣我們就完成了用中繼器制作分級多選下拉列表的的原型模板了，下次使用時，我們只需要在中繼器表格里填寫選項，即可自動生成交互，是不是很方便呢？感興趣的同學(xué)們可以動手試試哦。

那本期的教程就到此為止了，感謝您的閱讀，我們下期見，88~

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

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