級聯(lián)是原型中比較常用的一種效果，在繪制級聯(lián)效果時我們通常采用的動態(tài)面板，加上“選項改變時”事件完成。這種情況下若級聯(lián)下拉框值過多時，那么必須為每個下拉框值寫事件，耗費時間與精力。接下來本文將展現(xiàn)省市區(qū)級聯(lián)的兩種方式，后者采用動態(tài)面板中“value”屬性實現(xiàn)效果。大家可以進行比較。

第一種方式：使用下拉列表框

為下拉列表框每個值編寫“選項改變時”事件。

1. 在設計器中拖拽三個下拉框，三個文本標簽，并對每個下拉框進行命名，將“市”、“區(qū)”下拉框轉換成動態(tài)面板。如下圖：

2. 為省、市、區(qū)添加模擬數(shù)據(jù)。在添加市、區(qū)時需要注意，因為是不同省對應的不同的市、區(qū)，所以市、區(qū)動態(tài)面板要分別創(chuàng)建。如下圖：

3. 省市區(qū)級聯(lián)思路：選擇省之后，市、區(qū)應該隨之改變，例如，選擇安徽省，市下拉框應該是安徽省下面的所有市，區(qū)下拉框應該是當前選中市所有的區(qū)（一般默認為省會城市、省會城市所在區(qū)）。

下面創(chuàng)建“省”下拉框的“選項改變時”事件。

依照設置安徽省的，完全其他省的設置。設置完成后如下圖：

設置后，F(xiàn)5運行，效果如下：

下面創(chuàng)建“市”下拉框的“選項改變時”事件。

因為“市”下拉框與“區(qū)”下拉框是動態(tài)面板，所以在設置“選項改變時”事件時，需要到每個面板中對應設置。

依照合肥市，設置安徽省其他市設置，如下圖：

與合肥市相同的，完成其他省市的“選項改變時”事件的設置。

設置完成后，F(xiàn)5運行，如下圖：

至此，通過第一種編寫下拉框各項“選項改變時”事件實現(xiàn)省市縣級聯(lián)效果完成。

第二種方式：利用動態(tài)面板

利用動態(tài)面板狀態(tài)“value”屬性，通過變量和編寫“選項改變時”事件實現(xiàn)效果。

在第一種方式中我們寫了如下多事件：如下圖

在第一種方式中看到，需要為每一個下拉框編寫事件，如果要實現(xiàn)32個省市自治區(qū)級聯(lián)效果，難道要編寫32個條件判斷？估計會被折磨死了。下面簡單介紹第二種實現(xiàn)方式。

首先保證“省”下拉框內選項值與“市”動態(tài)面板的名稱相同，如下圖：

為什么要兩者名稱一致？下面介紹，動態(tài)面板value屬性。

動態(tài)面板狀態(tài)名稱就是value，所以當省與動態(tài)面板名稱一致時，動態(tài)面板會自動匹配相對應的下拉框。需要做一下設置：

[[LVAR1]]是什么？[[LVAR1]]是變量值，Axure里面有變量的概念，就和編程中變量一樣。把當前原件選項值賦值給變量LVAR1，之后“市”動態(tài)面板會自動匹配相對應的下拉框。效果如下：

類似的，為“市”動態(tài)面板下拉框設置“區(qū)”動態(tài)面板的事件。

用這種方式實現(xiàn)級聯(lián)效果，我們沒有過多的編寫事件，只有了動態(tài)面板的value屬性即可，大大提高了原型制作效率。

小結：

為大家介紹了兩種實現(xiàn)級聯(lián)效果的方式，第二種方式需要掌握Axure變量的相關知識。

后續(xù)會為大家介紹Axure變量的相關知識點。任何問題可以留言，互相交流。

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