原生JS實現省市區（縣）三級聯動選擇

原文地址→看過來

寫在前面

前段時間寫一個關於天氣的東西，裏面的省市區（縣）城市選擇讓我很頭疼，在網上搜索出來大都是藉助插件或者第三方庫，感受這樣作代碼會很重，因此索性就把幾種城市選擇的方式實現一遍，以備往後的不時之需。這三種方法都是針對pc端的，而且都是使用原生js實現的，連jq都沒使用，因而代碼有點繁瑣額（尷尬）。。。。不過仍是讓我把原理講完吧。

源代碼地址→傳送門

預覽地址→傳送門

方法一：下拉選擇框實現省市區（縣）三級聯動

1. 用下拉框實現省市區三級聯動是很常見的一種方式，也很方便。這裏須要先了解下select的相關屬性及其對象屬性，請參考此文
2. 先看下最終實現效果圖：
   
3. 思路介紹：
   • 頁面加載時，動態獲取省份列表並放到下拉菜單的下拉項中：
     

   /*自動加載省份列表*/
   (function showProv() {
    btn.disabled = true;
    var len = provice.length;
    for (var i = 0; i < len; i++) {
        var provOpt = document.createElement('option');
        provOpt.innerText = provice[i]['name'];
        provOpt.value = i;
        prov.appendChild(provOpt);
    }
   })();

   • 當點擊省份列表中的某一項，此時觸發省份下拉框的onchange事件，在onchange事件中根據前面所選的省份來顯示對應城市。這裏用到一個select的selectedIndex屬性，從而獲取剛剛點擊的是哪一個省份（生成省份列表時添加了value屬性值）：
     
     

   var val = obj.options[obj.selectedIndex].value;  
    //這裏獲得的是所選擇省份在全部下拉項中爲第幾項

   • 當點擊城市列表中的某一項時，原理同上（此處不贅述）
     
   • 選擇城市時存在兩種狀況，如何城市選項下不存在縣區，則直接將所選省市顯示在輸入框，不然依照上訴原理顯示縣區

   <!--方法是判斷縣區的length是否爲0-->
    var countryLen = provice[current.prov]["city"][val].districtAndCounty.length;
        if(countryLen == 0){
            addrShow.value = provice[current.prov].name + '-' + provice[current.prov]["city"][current.city].name;
            return;
        }

   • 最後點擊縣區後再按肯定，則可將所選地點顯示在輸入框中。
4. 注意:
   • 在未選中具體縣區時，按鈕爲不可點狀態
   • 具體的實現主要根據城市數據來進行更細的處理。
5. 說明：
   • 這裏使用的省市區數據來源於網絡，不能保證真實性及完整性，僅供案例使用
   • 此處使用的數據類型爲js數組,格式參考以下（完整版）：

var provice = [
    {
        name: "北京市",
        city: [
            {
                name: "北京市",
                districtAndCounty: ["東城區", "西城區", "崇文區", "宣武區", "朝陽區", "豐臺區", "石景山區", "海淀區", "門頭溝區", "房山區", "通州區", "順義區", "昌平區", "大興區", "懷柔區", "平谷區", "密雲縣", "延慶縣", "延慶鎮"]
            }
        ]
    },
    
    ......
    
    {
        name: "河北省",
        city: [
            {
                name: "石家莊市",
                districtAndCounty: ["長安區", "橋東區", "橋西區", "新華區", "裕華區", "井陘礦區", "辛集市", "藁城市", "晉州市", "新樂市", "鹿泉市", "井陘縣", "微水鎮", "正定縣", "正定鎮", "欒城縣", "欒城鎮", "行唐縣", "龍州鎮", "靈壽縣", "靈壽鎮", "高邑縣", "高邑鎮", "深澤縣", "深澤鎮", "贊皇縣", "贊皇鎮", "無極縣", "無極鎮", "平山縣", "平山鎮", "元氏縣", "槐陽鎮", "趙縣", "趙州鎮"]
            },
            
            .......
            
            {
                name: "邯鄲市",
                districtAndCounty: ["叢臺區", "邯山區", "復興區", "峯峯礦區", "武安市", "邯鄲縣",.....,"曲周縣", "曲周鎮"]
            }
        ]
    }
]

方法二：按級選中省市縣/區

1. 這種方式比上面的下拉框更好看點，操做也更方便點，不過大概的邏輯有點相似。所用省市區數據跟上面的一致。
2. 先看看這種方式的效果圖：
   
3. 在頁面加載時一樣先顯示出全部的省份列表（方法相似）
   
4. 點擊具體省份時，將省份列表替換成對應的城市列表，點擊具體城市時顯示對應縣區，實現以下：

addrWrap.onclick = function (e) {     //將點擊事件委託給列表的父元素
    var n;
    var e = e || window.event;
    var target = e.target || e.srcElement;
    if (target && target.nodeName == 'LI') {
        /*先判斷當前顯示區域顯示的是省市區的那部分*/
        for (var z = 0; z < 3; z++) {
            if (titleWrap[z].className == 'titleSel')
                n = z;
        }
        /*顯示的處理函數*/
        switch (n) {
            case 0:
                showCity2(target.index);   //點擊的是省份中列表的某一項，接下來則顯示城市列表
                break;
            case 1:
                showCountry2(target.index);  //點擊的是城市列表中的某一項，接下來則顯示縣區列表
                break;
            case 2:
                selectCountry(target.index);  //點擊具體的某個縣區，則將該縣區選擇
                break;
            default:
                showProv2();
        }
    }
};

1. 上面點擊的每一步中將選中項的索引及值保存在一個對象中，以便最後點擊肯定按鈕將選擇的省市區顯示在輸入框中。
2. 當選擇的城市不存在縣區時處理跟第一種方式一致。
3. 當點擊分類時，顯示對應的內容，同時將保存的對象的值進行處理：
   

//將事件委託給父元素,根據點擊的分類進行處理（html的設置好li的value值）
        if (target.value == '0') {
            showProv2();  
        } else if (target.value == '1') {
            showCity2(current2.prov);
        } else {
            showCountry2(current2.city);
        }

1. OK

方法三：按字母順序選中城市

1. 直接按字母的順序選中城市這種方式比前兩種更簡單粗暴也較爲簡單，代碼量也較少。
2. 先看看這種方式的效果圖：
   
3. 頁面加載時先顯示熱門城市
   
4. 點擊不一樣字母集，顯示對應的城市列表

switch (index) {
            case 0:    //0爲熱門項
                showHotCity();
                break;
            case 6:    //6爲最後一欄，字母集個數爲2
                showCitys(index, 2);
                break;
            default:   //其他索引，字母集個數都爲4
                showCitys(index, 4);
        }

function showCitys(index, m) {
    //經過傳入的參數截取城市數據的一部分爲當前要顯示的城市列表
    var currentAll = cityAll.slice(4 * index - 3, 4 * index + m - 3);  
    
    .....
    
    //將動態生成的列表項放到顯示區域
}

1. 點擊具體某一個城市時，將其顯示在輸入框中。
   
2. 這種方式的城市數據跟前兩種不一樣，來源於網上，不能保證真實性及完整性，僅供案例使用，數據格式以下（完整版）：

var cityAll = [
    {
        name: "hot",
        citys: ["北京", "上海", "廣州", "深圳", "杭州", "南京", "成都", "重慶", "武漢", "長沙", "昆明"]
    },
    {
        name: "A",
        citys: ["阿壩", "阿拉善", "阿里", "安康", "安慶", "鞍山", "安順", "安陽", "澳門"]
    },
    
    ......
    
    
    {
        name: "Z",
        citys: ["雜多縣", "贊皇縣", "棗強縣", "棗陽市", "棗莊",.......,資陽"]
}

7.完美~

小結

1. 詳細代碼看上面給出了連接，有註釋的額（firefox和chrome可正常顯示）~
2. 這幾種實現方式爲一己之見，歡迎大佬們指點，若有更好的能夠告訴我，我來完善完善~
3. 有人能告訴我怎麼作gif圖麼？