? ?省市縣三級聯(lián)動選擇功能在互聯(lián)網(wǎng)平臺應(yīng)用非常廣泛昙啄，很多人在做產(chǎn)品設(shè)計(jì)時磷籍，不知道怎么實(shí)現(xiàn)三級聯(lián)動效果，或者只能簡單實(shí)現(xiàn)一兩個固定城市的三級聯(lián)動效果腰奋。如果要實(shí)現(xiàn)全國城市的三級聯(lián)動選擇呢蝠引？作者將通過這篇案列分享阳谍，教大家使用Axure制作實(shí)現(xiàn)“全國城市省市縣三級聯(lián)動選擇效果”
演示地址：省市區(qū)三級聯(lián)動選擇（全國數(shù)據(jù)）
實(shí)現(xiàn)效果
1、可以任意選擇全國所有省份螃概、選擇該省份對應(yīng)的城市矫夯、選擇該城市對應(yīng)的縣區(qū)；
2吊洼、未選擇省份時训貌，點(diǎn)擊“城市下拉選擇”，提示“請先選擇省份”冒窍；
3递沪、未選擇城市時豺鼻，點(diǎn)擊“縣區(qū)下拉選擇”，提示“請先選擇城市”区拳；
4拘领、切換選中省份時，重置城市及縣區(qū)選項(xiàng)樱调；
5、切換選中城市時届良，重置縣區(qū)選項(xiàng)
6笆凌、當(dāng)前選項(xiàng)處于下拉框選項(xiàng)狀態(tài)時，點(diǎn)擊其他選擇框士葫，隱藏當(dāng)前選項(xiàng)下拉框乞而；
7、下拉選項(xiàng)框展示時慢显，下拉箭頭向上爪模，下拉選項(xiàng)框隱藏時，下拉箭頭向上荚藻；
8屋灌、動態(tài)顯示三級行政區(qū)移入狀態(tài)、選中狀態(tài)应狱、取消選中狀態(tài)共郭；
原理分析
1、利用中繼器的數(shù)據(jù)存儲功能疾呻，用三個中繼器分別存放省份除嘹、城市、區(qū)域數(shù)據(jù)岸蜗；
1.1 省份中繼器只需1列尉咕，用來存放全國所有省份數(shù)據(jù)；
1.2 城市中繼器需要2列璃岳，用來存放省份數(shù)據(jù)及城市數(shù)據(jù)（注意省份名稱要和省份中繼器的省份名稱一致）年缎；
1.3 縣區(qū)中繼器需要2列，用來存放城市數(shù)據(jù)及縣區(qū)數(shù)據(jù)（注意城市名稱要和城市中繼器里城市名稱一致）矾睦；
2晦款、利用“省份下拉”元件的單擊事件觸發(fā)省份下拉選項(xiàng)的展示與隱藏；
3枚冗、利用臨時變量將選中的省份名稱賦值給省份輸入框缓溅，從而顯示當(dāng)前已選省份；
4赁温、利用“省份輸入框”元件的文本改變事件坛怪，觸發(fā)城市文本輸入框的顯示及城市下拉選項(xiàng)框的內(nèi)容淤齐；
5、利用“城市下拉”元件的選中狀態(tài)事件袜匿，判斷省份是否選中更啄，未選中城市則給出“請先選擇省份！”的錯誤提示居灯；
6祭务、城市、區(qū)域涉及的各元件設(shè)置方式同“2怪嫌、3义锥、4、5”步驟岩灭。
元件準(zhǔn)備
1拌倍、省份輸入框背景（省份背景），放在輸入框底部
2噪径、省份輸入框（省份顯示）柱恤，用于顯示已選擇的省份名稱
3、省份下拉指示圖標(biāo)（省份選擇）找爱，用于點(diǎn)擊觸發(fā)展示下拉選項(xiàng)梗顺，隱藏下拉選項(xiàng)
4、省份下拉組合選項(xiàng)（包括一個中繼器sf,動態(tài)面板sfn,動態(tài)面板sfw）缴允，用于顯示所有省份名字
5荚守、城市輸入框背景(城市背景)，放在輸入框底部
6练般、城市輸入框(城市顯示)矗漾，用于顯示已選擇的城市名稱
7、城市下拉指示圖標(biāo)（城市選擇）薄料，用于點(diǎn)擊觸發(fā)展示下拉選項(xiàng)敞贡，隱藏下拉選項(xiàng)
8、城市下拉組合選項(xiàng)（包括一個中繼器cs,動態(tài)面板csn,動態(tài)面板csw）摄职，用于顯示所有城市名字
9誊役、縣區(qū)輸入框背景（縣區(qū)背景），放在輸入框底部
10谷市、縣區(qū)輸入框（縣區(qū)文字）蛔垢，用于顯示已選擇的城市名稱
11、縣區(qū)下拉指示圖標(biāo)（縣區(qū)選擇）迫悠，用于點(diǎn)擊觸發(fā)展示下拉選項(xiàng)鹏漆，隱藏下拉選項(xiàng)
12、縣區(qū)下拉組合選項(xiàng)（包括一個中繼器xq,動態(tài)面板xqn,動態(tài)面板xqw），用于顯示所有縣區(qū)名字
13艺玲、操作提示組合元件(提示框)括蝠，用于顯示校驗(yàn)出錯時的提示
14、背景饭聚，整個案例的演示背景忌警，可要可不要
隱藏提示文件，重新布局元件后效果如下
實(shí)現(xiàn)步驟
1秒梳、準(zhǔn)備省份數(shù)據(jù)及操作顯示元件
拖入一個中繼器sf法绵，給中繼器的默認(rèn)Column0列添加全國所有省份數(shù)據(jù)，要加上“請選擇”數(shù)據(jù)
將中繼器的數(shù)據(jù)通過每項(xiàng)加載時賦值給矩形端幼，矩形顯示的數(shù)據(jù)就是省份待選項(xiàng)數(shù)據(jù)
將中繼器sf轉(zhuǎn)換為動態(tài)面板sfn礼烈，動態(tài)面板的大小為220px*240px。設(shè)置動態(tài)面板的滾動條屬性為“自動顯示垂直滾動條”
實(shí)用小技巧：將可滾動的動態(tài)面板sfn轉(zhuǎn)換為動態(tài)面板sfw婆跑，動態(tài)面板的大小為200px*240px。設(shè)置動態(tài)面板的滾動條屬性為“無”庭呜，從而可以實(shí)現(xiàn)滾動且隱藏滾動條的效果
準(zhǔn)備三個元件滑进，分別是：省份背景矩形放在最下面，省份顯示文本框放在中間層募谎，省份選擇矩形放在最上面扶关。
省份數(shù)據(jù)涉及的所有元件整理后如下圖所示：
省份數(shù)據(jù)涉及的所有元件整理后如下圖所示：
2、準(zhǔn)備城市數(shù)據(jù)及操作顯示元件
cs中繼器（城市待選數(shù)據(jù)）有兩列数冬，一列s保存省份數(shù)據(jù)节槐，一列cs保存城市數(shù)據(jù)，注意省份與城市的對應(yīng)關(guān)系拐纱。其余操作步驟同省份數(shù)據(jù)铜异，此處不再描述。
3秸架、準(zhǔn)備縣區(qū)數(shù)據(jù)及操作顯示元件
4揍庄、設(shè)置省份數(shù)據(jù)相關(guān)元件事件
單擊省份選擇時，切換該元件的選中狀態(tài)东抹；選中時蚂子，箭頭向上（FontAwesome字體），顯示省份下拉選項(xiàng)缭黔；取消選中時食茎，箭頭向下（FontAwesome字體），隱藏省份下拉選項(xiàng)
省份下拉選項(xiàng)展開馏谨，單擊某一項(xiàng)時别渔，將該項(xiàng)值賦值給省份顯示文本框，同時觸發(fā)省份選擇的單擊事件（作用是隱藏省份下拉選項(xiàng)框）
當(dāng)省份顯示文本框內(nèi)容改變時，將城市顯示文本框的內(nèi)容改為請選擇（重置城市數(shù)據(jù)）钠糊，觸發(fā)城市中繼器的載入事件
4挟秤、設(shè)置城市數(shù)據(jù)相關(guān)元件事件
單擊城市選擇時，切換該元件的選中狀態(tài)抄伍；
選中時艘刚，需要判斷省份顯示的文字是否為請選擇
如果省份顯示為“請選擇”，表示省份還沒被選中截珍，設(shè)置界面提示為“請先選擇省份攀甚！”，1秒后岗喉，自動隱藏提示
如果省份顯示不為“請選擇”秋度，表示省份已經(jīng)被選中了，這個時候钱床，需要為中繼器添加篩選功能荚斯，僅顯示已選中省份對應(yīng)的城市數(shù)據(jù)；箭頭向上（FontAwesome字體）查牌，顯示城市下拉選項(xiàng)
取消選中時事期，箭頭向下（FontAwesome字體），隱藏城市下拉選項(xiàng)
? ? 中繼器添加篩選功能纸颜，僅顯示已選中省份對應(yīng)的城市數(shù)據(jù)兽泣，設(shè)置方式如下
當(dāng)城市顯示文本框內(nèi)容改變時，將縣區(qū)文字文本框的內(nèi)容改為請選擇（重置縣區(qū)數(shù)據(jù)）
5胁孙、設(shè)置縣區(qū)數(shù)據(jù)相關(guān)元件事件
縣區(qū)各元件點(diǎn)擊唠倦、顯示事件與城市各元件一致，以下是事件設(shè)置截圖涮较，具體不在描述
實(shí)用小技巧：利用顯示事件的“燈箱效果”稠鼻，背景色為黑色，透明度設(shè)置為20%法希。提示效果很漂亮枷餐。
本案例已完成，點(diǎn)擊QQ群“532261671”獲取源文件苫亦；
點(diǎn)擊查看案例“動態(tài)隨機(jī)獲取“大小寫字母及數(shù)字”圖形校驗(yàn)碼”毛肋；
點(diǎn)擊查看案例“雙向列表帶計(jì)數(shù)選擇”；
更多案例請點(diǎn)擊http://www.pmgod.cn?查看屋剑。
