省市縣三級聯動選擇功能在互聯網平臺應用非常廣泛，很多人在做產品設計時，不知道怎麼實現三級聯動效果，或者只能簡單實現一兩個固定城市的三級聯動效果。如果要實現全國城市的三級聯動選擇呢？作者將通過這篇案列分享，教大家使用Axure製作實現“全國城市省市縣三級聯動選擇效果”。
實現效果
- 可以任意選擇全國所有省份、選擇該省份對應的城市、選擇該城市對應的縣區；
- 未選擇省份時，點擊“城市下拉選擇”，提示“請先選擇省份”；
- 未選擇城市時，點擊“縣區下拉選擇”，提示“請先選擇城市”；
- 切換選中省份時，重置城市及縣區選項；
- 切換選中城市時，重置縣區選項
- 當前選項處於下拉框選項狀態時，點擊其他選擇框，隱藏當前選項下拉框；
- 下拉選項框展示時，下拉箭頭向上，下拉選項框隱藏時，下拉箭頭向上；
- 動態顯示三級行政區移入狀態、選中狀態、取消選中狀態。
原理分析
（1）利用中繼器的數據存儲功能，用三個中繼器分別存放省份、城市、區域數據；
- 省份中繼器只需1列，用來存放全國所有省份數據；
- 城市中繼器需要2列，用來存放省份數據及城市數據（注意省份名稱要和省份中繼器的省份名稱一致）；
- 縣區中繼器需要2列，用來存放城市數據及縣區數據（注意城市名稱要和城市中繼器裡城市名稱一致）；
（2）利用“省份下拉”元件的單擊事件觸發省份下拉選項的展示與隱藏；
（3）利用臨時變量將選中的省份名稱賦值給省份輸入框，從而顯示當前已選省份；
（4）利用“省份輸入框”元件的文本改變事件，觸發城市文本輸入框的顯示及城市下拉選項框的內容；
（5）利用“城市下拉”元件的選中狀態事件，判斷省份是否選中，未選中城市則給出“請先選擇省份！”的錯誤提示；
（6）城市、區域涉及的各元件設置方式同“2、3、4、5”步驟。
元件準備
- 省份輸入框背景（省份背景），放在輸入框底部
- 省份輸入框（省份顯示），用於顯示已選擇的省份名稱
- 省份下拉指示圖標（省份選擇），用於點擊觸發展示下拉選項，隱藏下拉選項
- 省份下拉組合選項（包括一箇中繼器sf,動態面板sfn,動態面板sfw），用於顯示所有省份名字
- 城市輸入框背景(城市背景)，放在輸入框底部
- 城市輸入框(城市顯示)，用於顯示已選擇的城市名稱
- 城市下拉指示圖標（城市選擇），用於點擊觸發展示下拉選項，隱藏下拉選項
- 城市下拉組合選項（包括一箇中繼器cs,動態面板csn,動態面板csw），用於顯示所有城市名字
- 縣區輸入框背景（縣區背景），放在輸入框底部
- 縣區輸入框（縣區文字），用於顯示已選擇的城市名稱
- 縣區下拉指示圖標（縣區選擇），用於點擊觸發展示下拉選項，隱藏下拉選項
- 縣區下拉組合選項（包括一箇中繼器xq,動態面板xqn,動態面板xqw），用於顯示所有縣區名字
- 操作提示組合元件(提示框)，用於顯示校驗出錯時的提示
- 背景，整個案例的演示背景，可要可不要
隱藏提示文件，重新佈局元件後效果如下：
實現步驟
1. 準備省份數據及操作顯示元件
拖入一箇中繼器sf，給中繼器的默認Column0列添加全國所有省份數據，要加上“請選擇”數據
將中繼器的數據通過每項加載時賦值給矩形，矩形顯示的數據就是省份待選項數據
將中繼器sf轉換為動態面板sfn，動態面板的大小為220px*240px。設置動態面板的滾動條屬性為“自動顯示垂直滾動條”
實用小技巧：將可滾動的動態面板sfn轉換為動態面板sfw，動態面板的大小為200px*240px。設置動態面板的滾動條屬性為“無”，從而可以實現滾動且隱藏滾動條的效果
準備三個元件，分別是：省份背景矩形放在最下面，省份顯示文本框放在中間層，省份選擇矩形放在最上面。
省份數據涉及的所有元件整理後如下圖所示：
省份數據涉及的所有元件整理後如下圖所示：
2. 準備城市數據及操作顯示元件
cs中繼器（城市待選數據）有兩列，一列s保存省份數據，一列cs保存城市數據，注意省份與城市的對應關係。其餘操作步驟同省份數據，此處不再描述。
3. 準備縣區數據及操作顯示元件
4. 設置省份數據相關元件事件
單擊省份選擇時，切換該元件的選中狀態；選中時，箭頭向上（FontAwesome字體），顯示省份下拉選項；取消選中時，箭頭向下（FontAwesome字體），隱藏省份下拉選項
省份下拉選項展開，單擊某一項時，將該項值賦值給省份顯示文本框，同時觸發省份選擇的單擊事件（作用是隱藏省份下拉選項框）
當省份顯示文本框內容改變時，將城市顯示文本框的內容改為請選擇（重置城市數據），觸發城市中繼器的載入事件
4、設置城市數據相關元件事件
單擊城市選擇時，切換該元件的選中狀態；
選中時，需要判斷省份顯示的文字是否為請選擇：
- 如果省份顯示為“請選擇”，表示省份還沒被選中，設置界面提示為“請先選擇省份！”，1秒後，自動隱藏提示
- 如果省份顯示不為“請選擇”，表示省份已經被選中了，這個時候，需要為中繼器添加篩選功能，僅顯示已選中省份對應的城市數據；箭頭向上（FontAwesome字體），顯示城市下拉選項
取消選中時，箭頭向下（FontAwesome字體），隱藏城市下拉選項
中繼器添加篩選功能，僅顯示已選中省份對應的城市數據，設置方式如下：
當城市顯示文本框內容改變時，將縣區文字文本框的內容改為請選擇（重置縣區數據）
5. 設置縣區數據相關元件事件
縣區各元件點擊、顯示事件與城市各元件一致，以下是事件設置截圖，具體不在描述
實用小技巧：利用顯示事件的“燈箱效果”，背景色為黑色，透明度設置為20%。提示效果很漂亮。
本案例已完成，點擊查看上一篇案例《動態隨機獲取“大小寫字母與數字”驗證碼》；
作者：十月大神，個人網站： www.pmgod.cn
題圖來自 Unsplash ，基於 CC0 協議
閱讀更多 人人都是產品經理 的文章
