city-picker根据县区代码初始化

city-picker是一款简单易用的省市县级联选择JQuery插件,交互体验极佳。使用起来也简单

<script src="/path/to/jquery.js">script>
<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数组结构
city-picker根据县区代码初始化_第1张图片

所以根据县区的代码,我们就可以很方便的获取对应点省、市名称,代码如下:

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;
    }

你可能感兴趣的:(前端)