city-picker根據縣區程式碼初始化

__HelloWorld__發表於2017-10-16

city-picker是一款簡單易用的省市縣級聯選擇JQuery外掛,互動體驗極佳。使用起來也簡單

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/city-picker.data.js"></script>
<script src="/path/to/city-picker.js"></script>

無預設值的初始化

$("#city-picker").citypicker();

有預設值的初始化

$("#city-picker").citypicker({
  province: "江蘇省",
  city: "常州市",
  district: "溧陽市"
});

選擇之後,我們可以得到形如

110000/110100/110101
北京市/北京市/東城區

這樣的城市程式碼
假設,我們後臺資料庫中只儲存了一個“110101”(東城區的程式碼),我們將如何對其進行初始化,開啟city-picker.js的原始碼,我們沒有發現類似的方法,但我們可以通過原始碼中的ChineseDistricts陣列來實現通過Code初始化city-picker

(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as anonymous module.
        define(['jquery', 'ChineseDistricts'], factory);
    } else if (typeof exports === 'object') {
        // Node / CommonJS
        factory(require('jquery'), require('ChineseDistricts'));
    } else {
        // Browser globals.
        factory(jQuery, ChineseDistricts);
    }
})(function ($, ChineseDistricts) {

    'use strict';

這其實就是ChineseDistricts陣列結構
這裡寫圖片描述

所以根據縣區的程式碼,我們就可以很方便的獲取對應點省、市名稱,程式碼如下:

var p1 = ChineseDistricts[86]['A-G'];
    var p2 = ChineseDistricts[86]['H-K'];
    var p3 = ChineseDistricts[86]['L-S'];
    var p4 = ChineseDistricts[86]['T-Z'];

    function getAddressByProvinceCode(provinceCode, p) {
        var province = '';
        for (var i = 0; i < p.length; i++) {
            if (provinceCode == p[i].code) {
                province = p[i].address;
                break;
            }
        }
        return province;
    }

    function getByDistrict(districtCode) {
        var province = '';
        var city = '';
        var district = '';
        try {
            var provinceCode = parseInt(districtCode / 10000) * 10000;
            var cityCode = parseInt(districtCode / 100) * 100;
            city = ChineseDistricts[provinceCode][cityCode];
            district = ChineseDistricts[cityCode][districtCode];
            var isFound = 0;
            if (isFound == 0) {
                province = getAddressByProvinceCode(provinceCode, p1);
                if (province != '') {
                    isFound = 1;
                }
            }
            if (isFound == 0) {
                province = getAddressByProvinceCode(provinceCode, p2);
                if (province != '') {
                    isFound = 1;
                }
            }
            if (isFound == 0) {
                province = getAddressByProvinceCode(provinceCode, p3);
                if (province != '') {
                    isFound = 1;
                }
            }
            if (isFound == 0) {
                province = getAddressByProvinceCode(provinceCode, p4);
                if (province != '') {
                    isFound = 1;
                }
            }
        } catch (err) {
            console.log(err);
        }

        var arr = new Array(3);
        arr[0] = province;
        arr[1] = city;
        arr[2] = district;
        return arr;
    }

相關文章