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

小灰灰 2022-06-07 08:43 232阅读 0赞

[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数组结构  
![这里写图片描述][SouthEast]

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

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

[city-picker]: https://github.com/tshi0912/city-picker
[SouthEast]: /images/20220607/67c48c8306b54197aaf258edcd0ffd78.png

发表评论取消回复

表情：

评论列表（有 0 条评论，232人围观）

还没有评论，来说两句吧...

相关阅读

相关 Servlet-Web 省市区（县）三级联动代码与项目总结

\Servlet-Web 省市区（县）三级联动代码与项目总结一、创建得省市区（县）数据库可以下载我百度云盘中的省市区（县）数据 ,然后导入MysqL数据中

快来打我*/ 2024年02月18日 14:27/ 0 赞/ 37 阅读

相关【MySQL】全国省市县三级联动SQL语句—区县SQL(三)

目录 —》区县信息表数据 -------------------- [【MySQL】全国省市县三级联动SQL语句—建表和省份SQL(一)\_路遥叶子的博客-CSDN博

不念不忘少年蓝@/ 2023年09月24日 21:58/ 0 赞/ 62 阅读

相关内存空间的布局（栈区、堆区、代码区、全局区）以及堆空间的初始化

代码区（代码段）：用于存放代码全局区（数据段）：用于存放全局变量等栈区：当调用一个函数时，系统就会给他分配一段连续的栈空间，等函数调用完毕后就会自动回收这段栈空间

一时失言乱红尘/ 2023年02月20日 02:14/ 0 赞/ 20 阅读

相关 layui citypicker 使用

参见：[https://www.freesion.com/article/3144457988/][https_www.freesion.com_article_3144457

淡淡的烟草味﹌/ 2022年11月21日 03:47/ 0 赞/ 215 阅读

相关中国的省，市，县，乡，区完整数据

中国的省，市，县，乡，区完整数据 DROP TABLE IF EXISTS `base_area`; CREATE TABLE `base_area` (

柔光的暖阳◎/ 2022年10月13日 05:27/ 0 赞/ 260 阅读

相关省市区县三级联动JAVA+MySQL+JQuery

场景介绍：由于项目要求，需要做一个进件(新增)功能，而该功能里要用到车品牌、车系、车型的联动查询，也就是经典的三级联动。大体思路如下：

向右看齐/ 2022年07月14日 13:09/ 0 赞/ 575 阅读

相关 [JSON]2017年最新县及县以上行政区划代码

前面有过两篇相关的博客： [中国行政区划代码数据库文件 - 最新县及县以上行政区划代码（截止2012年10月31日）][- _2012_10_31] [\[数据\

Love The Way You Lie/ 2022年06月15日 10:43/ 0 赞/ 259 阅读

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

[city-picker][]是一款简单易用的省市县级联选择JQuery插件，交互体验极佳。使用起来也简单 <script src="/path/to/jquery.

小灰灰/ 2022年06月07日 08:43/ 0 赞/ 233 阅读

相关 jquery实现省市县（区）三级联动

直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

﹏ヽ暗。殇╰゛Y/ 2022年05月06日 06:28/ 0 赞/ 410 阅读

相关省市区(县)行政区划境界线(geojson)获取说明及代码

高德地图行政区划查询接口说明高德地图[WEB服务API][WEB_API]提供了很多实用的Web接口，申请完高德地图key(详见[获取key][key]），就可以使用

墨蓝/ 2022年04月24日 08:20/ 0 赞/ 741 阅读