基于閉包和JSON的省市區聯動菜單的實現

王愛華

摘 要：利用網頁中嵌套的div元素結合樣式的相對定位和絕對定位技術，通過訪問JSON數據以及應用腳本中閉包的特點，制作一款簡單實用的省市區聯動菜單。

關鍵詞：定位;JSON數據;閉包;省市區聯動

中圖分類號：TP393 文獻標識碼：A 文章編號：1671-2064（2020）12-0057-02

省市區聯動在很多購物網站中使用，用戶填寫收件地址時，通過省市區聯動功能選擇省份、地市和區鎮，用起來非常方便。本文將使用網站開發中的定位技術、腳本中的閉包技術，結合訪問JSON數據來實現一款美觀方便的省市區聯動菜單。

1 運行效果說明

頁面初始運行時，只顯示圖1①的內容，鼠標指向此處時，顯示圖1②的部分，此時若是直接點擊請選擇地市或者請選擇區鎮，打開的內容區都為空，若是點擊請選擇省份，則顯示圖1下方所有省份以供用戶選擇。

若從所示省份中選擇山東省，修改選項卡名稱為山東省之后，直接跳轉到請選擇地市區域，顯示山東省所有地市，若選擇濟南市，則修改選項卡名稱后，直接跳轉到請選擇區鎮區域，顯示濟南市所有區鎮，若選擇歷下區，則將選項卡名稱改為歷下區，至此，一輪選擇完畢，圖1①內容變成“山東省/濟南市/歷下區”，鼠標離開之后，將收起下面所有的信息，只顯示選擇的結果。

2 頁面元素的結構和樣式要求

生成頁面元素的代碼如下。

請選擇省份、地市和區鎮

請選擇省份

請選擇地市

請選擇區鎮

類名為dW的元素是頂層元素，寬400像素，相對定位。

Id為tabW的元素，設置圖1①所示界面，高20像素，填充5像素，邊框1像素灰色，絕對定位，z軸取值為2，表示將其置于divW元素的前方，縱橫坐標為0，該div占據縱坐標空間為0到31像素。

Id為divW的元素，寬380像素，最小高度60像素，設置選項卡區，顯示相應的省份、地市或者區鎮，高度需要跟隨變化;下填充0，其余填充10像素，邊框1像素灰色，白色背景用于遮擋后面內容，絕對定位，z軸為1，縱坐標31像素，初始狀態隱藏。

當鼠標指向divW時，使用：hover和子元素選擇符設置tabW的下邊框為白色，設置divW顯示，通過tabW的白色下邊框覆蓋divW上邊框中相應部分，達到圖1①和②上下一體的效果。

選項卡區使用類名divT定義，寬380像素，高34像素，絕對定位，z軸為2。每個選項卡使用類名tab定義，高20像素，填充5像素，右邊距5像素，邊框2像素灰色，下邊框2像素暗紅色，向左浮動，字號10pt，文本行高20像素。選中的選項卡使用類名tabS定義，邊框2像素，顏色暗紅，下邊框2像素白色，做到選項卡和下面內容區連為一個整體。

每個內容區使用類名cont定義，寬380像素，上填充10像素，邊距auto，上邊框2像素暗紅色，絕對定位，z軸為1，縱坐標42像素，這是因為盒子divW有10像素上填充，每個選項卡元素總高度為34像素，所以選項卡在divW中占據的縱坐標范圍為10到43像素，內容區的2像素上邊框需要與選項卡的下邊框重合，重合的兩個像素為42像素和43像素，所以內容區的縱坐標需要設置為42像素。

省份、地市和區鎮三個內容區除了使用類名cont之外，分別應用了prov、city和area類名。內容區中顯示的所有省份、地市或者區鎮名稱，都使用span元素定界，通過浮動將span設置為橫向排列的塊元素，寬95像素，高30像素，字號10pt，藍色文本，鼠標手狀。

3 JSON數據的定義和訪問

省市區聯動功能中，使用的省市區名稱非常多，需要定義JSON數據。為了能夠讓讀者理解數據的結構和定義方式，使用圖2展示了北京市的數據。

數組中每一個元素都是一個對象，對象擁有name和city兩個屬性，name取值為省份名稱，city取值又是一個數組，數組中每個元素都是一個對象，對象擁有name和area兩個屬性，name取值為地市名稱，area取值是一個一維數組，數組元素內容是當前地市下面所有區鎮名稱。對于直轄市來說，city數組只有一個對象元素，對于省份來說，city數組中對象元素的個數取決于地市的個數。使用$.getJSON（）方法讀取JSON數據之后保存在全局變量city中，方便下面操作。

4 使用閉包實現省市區聯動功能

首先對數組city進行遍歷，將所有省份名稱使用span標記定界之后連接在一起，保存在變量contP中，為接下來顯示省份做好準備。

4.1 點擊選項卡時的功能設置

定義選擇省份、地市和區鎮三個選項卡的點擊事件處理函數$（“.tab”）.click（function（）{…}），該函數是頂層函數，功能如下。

使用jQuery的移除類名方法去掉所有選項卡中引用的tabS類名，恢復其初始狀態，同時隱藏所有內容區;之后為當前選項卡添加類名tabS，將其設置為選中狀態，獲取該選項卡索引，根據索引設置相應內容區為顯示狀態;為保證divW的高度能夠跟隨不同內容區內容多少變化，需要判斷選項卡的索引，若是0，表示點擊的是請選擇省份選項卡，將變量contP的內容設置為內容區prov的內容，獲取該內容區的高度，增加60像素之后，重新設置為divW的高度;若當前選項卡索引是1或者2，也就是點擊的是請選擇地市或請選擇區鎮時，分別獲取city和area內容區的高度，增加60像素之后設置為divW的高度。

4.2選擇省份

定義省份的事件處理函數$（“.prov>span”）.click（function（）{…}），該函數是選項卡點擊事件函數的閉包，功能如下。

獲取點擊的省份名稱保存在變量provT中，替換掉省份選項卡的內容。獲取該省份的索引，保存在變量provI中，通過該索引獲取省份下面的地市;完成該操作之后，使用觸發器方法觸發地市選項卡的click事件;每次重新選擇省份之后，需要清除之前選擇過的地市和區鎮信息，恢復原“請選擇地市”和“請選擇區鎮”內容，清除之前的區鎮選項卡對應的內容區的內容;遍歷當前選中省份的所有地市，以span元素連接在一起放在變量contC中，將contC內容作為內容區city的內容，獲取內容區city的高度，增加60像素之后，設置為divW的高度。

4.3 選擇地市

定義地市的事件處理函數$（“.city>span”）.click（function（）{…}），該函數是省份點擊事件函數的閉包，功能如下。

獲取點擊的地市名稱保存在變量cityT中，替換掉地市選項卡的內容。獲取當前地市的索引，保存在變量cityI中，通過該索引獲取地市下面的區鎮;完成該操作之后，使用觸發器方法觸發區鎮選項卡的click事件。每次重新選擇地市之后，需要重新選擇區鎮，因此要將之前選擇的區鎮信息去掉，設置區鎮選項卡的文本為“請選擇區鎮”;遍歷將當前選中地市的所有區鎮，以span元素內容形式連接在一起放在變量contA中，將contA內容作為內容區area的內容，獲取內容區area的高度，增加60像素之后，設置為divW的高度。

4.4選擇區鎮

定義區鎮的事件處理函數$（“.area>span”）.click（function（）{…}），該函數是地市點擊事件函數內部的閉包，功能如下。

獲取點擊的區鎮名稱保存在變量areaT中，替換掉區鎮選項卡的內容;設置變量selT的取值為選擇的結果，例如“山東省/濟南市/歷下區”，作為選項卡“請選擇省份、地市和區鎮”的內容。

5 結語

本文根據閉包的功能特點，使用四層嵌套函數完成省市區聯動菜單，先點擊省份選項卡，在顯示的省份信息中點擊所屬的省份名稱，點擊省份下面的地市名稱，點擊地市下面的區鎮名稱，每一層函數的功能必須基于上一層函數的結果。選擇了一次省份之后，可以反復重新選擇該省份下面的地市和地市下面的區鎮，通過閉包有效保留了父函數中局部變量的取值。

使用該方案實現的省市區聯動菜單，可以嵌入在頁面中任意一個位置，結構清晰，應用方便。