中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

省市縣三級聯(lián)動(dòng)選擇功能在互聯(lián)網(wǎng)平臺應(yīng)用非常廣泛，很多人在做產(chǎn)品設(shè)計(jì)時(shí)，不知道怎么實(shí)現(xiàn)三級聯(lián)動(dòng)效果，或者只能簡單實(shí)現(xiàn)一兩個(gè)固定城市的三級聯(lián)動(dòng)效果。如果要實(shí)現(xiàn)全國城市的三級聯(lián)動(dòng)選擇呢？作者將通過這篇案列分享，教大家使用Axure制作實(shí)現(xiàn)“全國城市省市縣三級聯(lián)動(dòng)選擇效果”。

實(shí)現(xiàn)效果

1. 可以任意選擇全國所有省份、選擇該省份對應(yīng)的城市、選擇該城市對應(yīng)的縣區(qū)；
2. 未選擇省份時(shí)，點(diǎn)擊“城市下拉選擇”，提示“請先選擇省份”；
3. 未選擇城市時(shí)，點(diǎn)擊“縣區(qū)下拉選擇”，提示“請先選擇城市”；
4. 切換選中省份時(shí)，重置城市及縣區(qū)選項(xiàng)；
5. 切換選中城市時(shí)，重置縣區(qū)選項(xiàng)
6. 當(dāng)前選項(xiàng)處于下拉框選項(xiàng)狀態(tài)時(shí)，點(diǎn)擊其他選擇框，隱藏當(dāng)前選項(xiàng)下拉框；
7. 下拉選項(xiàng)框展示時(shí)，下拉箭頭向上，下拉選項(xiàng)框隱藏時(shí)，下拉箭頭向上；
8. 動(dòng)態(tài)顯示三級行政區(qū)移入狀態(tài)、選中狀態(tài)、取消選中狀態(tài)。

原理分析

（1）利用中繼器的數(shù)據(jù)存儲功能，用三個(gè)中繼器分別存放省份、城市、區(qū)域數(shù)據(jù)；

• 省份中繼器只需1列，用來存放全國所有省份數(shù)據(jù)；
• 城市中繼器需要2列，用來存放省份數(shù)據(jù)及城市數(shù)據(jù)（注意省份名稱要和省份中繼器的省份名稱一致）；
• 縣區(qū)中繼器需要2列，用來存放城市數(shù)據(jù)及縣區(qū)數(shù)據(jù)（注意城市名稱要和城市中繼器里城市名稱一致）；

（2）利用“省份下拉”元件的單擊事件觸發(fā)省份下拉選項(xiàng)的展示與隱藏；

（3）利用臨時(shí)變量將選中的省份名稱賦值給省份輸入框，從而顯示當(dāng)前已選省份；

（4）利用“省份輸入框”元件的文本改變事件，觸發(fā)城市文本輸入框的顯示及城市下拉選項(xiàng)框的內(nèi)容；

（5）利用“城市下拉”元件的選中狀態(tài)事件，判斷省份是否選中，未選中城市則給出“請先選擇省份！”的錯(cuò)誤提示；

（6）城市、區(qū)域涉及的各元件設(shè)置方式同“2、3、4、5”步驟。

元件準(zhǔn)備

1. 省份輸入框背景（省份背景），放在輸入框底部
2. 省份輸入框（省份顯示），用于顯示已選擇的省份名稱
3. 省份下拉指示圖標(biāo)（省份選擇），用于點(diǎn)擊觸發(fā)展示下拉選項(xiàng)，隱藏下拉選項(xiàng)
4. 省份下拉組合選項(xiàng)（包括一個(gè)中繼器sf,動(dòng)態(tài)面板sfn,動(dòng)態(tài)面板sfw），用于顯示所有省份名字
5. 城市輸入框背景(城市背景)，放在輸入框底部
6. 城市輸入框(城市顯示)，用于顯示已選擇的城市名稱
7. 城市下拉指示圖標(biāo)（城市選擇），用于點(diǎn)擊觸發(fā)展示下拉選項(xiàng)，隱藏下拉選項(xiàng)
8. 城市下拉組合選項(xiàng)（包括一個(gè)中繼器cs,動(dòng)態(tài)面板csn,動(dòng)態(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)（包括一個(gè)中繼器xq,動(dòng)態(tài)面板xqn,動(dòng)態(tài)面板xqw），用于顯示所有縣區(qū)名字
13. 操作提示組合元件(提示框)，用于顯示校驗(yàn)出錯(cuò)時(shí)的提示
14. 背景，整個(gè)案例的演示背景，可要可不要

隱藏提示文件，重新布局元件后效果如下：

實(shí)現(xiàn)步驟

1. 準(zhǔn)備省份數(shù)據(jù)及操作顯示元件

拖入一個(gè)中繼器sf，給中繼器的默認(rèn)Column0列添加全國所有省份數(shù)據(jù)，要加上“請選擇”數(shù)據(jù)

將中繼器的數(shù)據(jù)通過每項(xiàng)加載時(shí)賦值給矩形，矩形顯示的數(shù)據(jù)就是省份待選項(xiàng)數(shù)據(jù)

將中繼器sf轉(zhuǎn)換為動(dòng)態(tài)面板sfn，動(dòng)態(tài)面板的大小為220px*240px。設(shè)置動(dòng)態(tài)面板的滾動(dòng)條屬性為“自動(dòng)顯示垂直滾動(dòng)條”

實(shí)用小技巧：將可滾動(dòng)的動(dòng)態(tài)面板sfn轉(zhuǎn)換為動(dòng)態(tài)面板sfw，動(dòng)態(tài)面板的大小為200px*240px。設(shè)置動(dòng)態(tài)面板的滾動(dòng)條屬性為“無”，從而可以實(shí)現(xiàn)滾動(dòng)且隱藏滾動(dòng)條的效果

準(zhǔn)備三個(gè)元件，分別是：省份背景矩形放在最下面，省份顯示文本框放在中間層，省份選擇矩形放在最上面。

省份數(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)元件事件

單擊省份選擇時(shí)，切換該元件的選中狀態(tài)；選中時(shí)，箭頭向上（FontAwesome字體），顯示省份下拉選項(xiàng)；取消選中時(shí)，箭頭向下（FontAwesome字體），隱藏省份下拉選項(xiàng)

省份下拉選項(xiàng)展開，單擊某一項(xiàng)時(shí)，將該項(xiàng)值賦值給省份顯示文本框，同時(shí)觸發(fā)省份選擇的單擊事件（作用是隱藏省份下拉選項(xiàng)框）

當(dāng)省份顯示文本框內(nèi)容改變時(shí)，將城市顯示文本框的內(nèi)容改為請選擇（重置城市數(shù)據(jù)），觸發(fā)城市中繼器的載入事件

4、設(shè)置城市數(shù)據(jù)相關(guān)元件事件

單擊城市選擇時(shí)，切換該元件的選中狀態(tài)；

選中時(shí)，需要判斷省份顯示的文字是否為請選擇：

• 如果省份顯示為“請選擇”，表示省份還沒被選中，設(shè)置界面提示為“請先選擇省份！”，1秒后，自動(dòng)隱藏提示
• 如果省份顯示不為“請選擇”，表示省份已經(jīng)被選中了，這個(gè)時(shí)候，需要為中繼器添加篩選功能，僅顯示已選中省份對應(yīng)的城市數(shù)據(jù)；箭頭向上（FontAwesome字體），顯示城市下拉選項(xiàng)

取消選中時(shí)，箭頭向下（FontAwesome字體），隱藏城市下拉選項(xiàng)

中繼器添加篩選功能，僅顯示已選中省份對應(yīng)的城市數(shù)據(jù)，設(shè)置方式如下：

當(dāng)城市顯示文本框內(nèi)容改變時(shí)，將縣區(qū)文字文本框的內(nèi)容改為請選擇（重置縣區(qū)數(shù)據(jù)）

5. 設(shè)置縣區(qū)數(shù)據(jù)相關(guān)元件事件

縣區(qū)各元件點(diǎn)擊、顯示事件與城市各元件一致，以下是事件設(shè)置截圖，具體不在描述

實(shí)用小技巧：利用顯示事件的“燈箱效果”，背景色為黑色，透明度設(shè)置為20%。提示效果很漂亮。

本案例已完成，點(diǎn)擊查看上一篇案例《動(dòng)態(tài)隨機(jī)獲取“大小寫字母與數(shù)字”驗(yàn)證碼》；

作者：十月大神，個(gè)人網(wǎng)站：?www.pmgod.cn

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

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