很久很久没有写博了。

今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们。。。

JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项目中。

数据来源于国家统计局官网。

先上图:

绑定省市区

使用方法:

1. 引用JQUERY    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>

2. 引用省市区数据 <script type="text/javascript" src="pdata.js"></script>

3. HTML代码:

 <div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="control-label col-sm-2">所在区域</label>
<div class="col-sm-3">
<select name="input_province" id="input_province" class="form-control">
</select>
</div>
<div class="col-sm-3">
<select name="input_city" id="input_city" class="form-control">
</select>
</div>
<div class="col-sm-3">
<select name="input_area" id="input_area" class="form-control">
</select>
</div>
</div>
</div>
</div>

4. JS代码:

     $(function () {
var html = "<option value=''>== 请选择 ==</option>"; $("#input_city").append(html); $("#input_area").append(html);
$.each(pdata,function(idx,item){
if (parseInt(item.level) == 0) {
html += "<option value='" + item.names + "' exid='" + item.code + "'>" + item.names + "</option>";
}
});
$("#input_province").append(html); $("#input_province").change(function(){
if ($(this).val() == "") return;
$("#input_city option").remove(); $("#input_area option").remove();
var code = $(this).find("option:selected").attr("exid"); code = code.substring(0,2);
var html = "<option value=''>== 请选择 ==</option>"; $("#input_area").append(html);
$.each(pdata,function(idx,item){
if (parseInt(item.level) == 1 && code == item.code.substring(0,2)) {
html += "<option value='" + item.names + "' exid='" + item.code + "'>" + item.names + "</option>";
}
});
$("#input_city").append(html);
}); $("#input_city").change(function(){
if ($(this).val() == "") return;
$("#input_area option").remove();
var code = $(this).find("option:selected").attr("exid"); code = code.substring(0,4);
var html = "<option value=''>== 请选择 ==</option>";
$.each(pdata,function(idx,item){
if (parseInt(item.level) == 2 && code == item.code.substring(0,4)) {
html += "<option value='" + item.names + "' exid='" + item.code + "'>" + item.names + "</option>";
}
});
$("#input_area").append(html);
});
//绑定
$("#input_province").val("广东省");$("#input_province").change();
$("#input_city").val("深圳市");$("#input_city").change();
$("#input_area").val("罗湖区"); });

源码下载:点击下载,解压密码 im531

某某公司又有神马  猝死  的,,,生命是革命的本钱,洗洗睡觉。。。

jquery省市区三级联动(数据来源国家统计局官网)内附源码下载的更多相关文章

  1. jquery省市区三级联动

    jquery省市区三级联动(数据来源国家统计局官网)内附源码下载 很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + ...

  2. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

  3. 分享一组很赞的 jQuery 特效【附源码下载】

    作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些  ...

  4. 基于Python接口自动化测试框架+数据与代码分离(进阶篇)附源码

    引言 在上一篇<基于Python接口自动化测试框架(初级篇)附源码>讲过了接口自动化测试框架的搭建,最核心的模块功能就是测试数据库初始化,再来看看之前的框架结构: 可以看出testcase ...

  5. 关于js渲染网页时爬取数据的思路和全过程(附源码)

    于js渲染网页时爬取数据的思路 首先可以先去用requests库访问url来测试一下能不能拿到数据,如果能拿到那么就是一个普通的网页,如果出现403类的错误代码可以在requests.get()方法里 ...

  6. 使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载

    HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" ...

  7. JS(JQuery) 省市区三级联动下拉选择

    引入 area.js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,i ...

  8. Jquery省市区三级联动案例

    //Java部分代码 public String province() throws Exception { List<Province> list=cityBiz.showProvinc ...

  9. jQuery省市区三级联动菜单

    <style> select{ padding:5px 0; } .outer{ width:500px; margin:20px auto; } </style> <d ...

随机推荐

  1. LibreOJ#6030. 「雅礼集训 2017 Day1」矩阵

    https://loj.ac/problem/6030 如果矩阵第i列有一个黑色, 那可以用他把第i行全都染黑,也可以使任意一列具有黑色 然后就可以用第i行把矩阵染黑 染黑一列的代价最少是1 染黑一行 ...

  2. git 第一次关联远程仓库

    1.首先需要先git pull origin master 2.然后合并两个无关的仓库 git pull origin master --allow-unrelated-histories

  3. 值得关注的sql-on-hadoop框架

    http://www.infoq.com/cn/news/2014/06/sql-on-hadoop 数据的操作语言是SQL,因此很多工具的开发目标自然就是能够在Hadoop上使用SQL.这些工具有些 ...

  4. 动态改变swiper的属性

    <script> var mySwiper = new Swiper('.swiper-container',{ autoplay : 1000, autoplayDisableOnInt ...

  5. Xilinx Altera FPGA中的逻辑资源(Slices VS LE)比较

    前言 经常有朋友会问我,“我这个方案是用A家的FPGA还是X家的FPGA呢?他们的容量够不够呢?他们的容量怎么比较呢?”当然,在大部分时候,我在给客户做设计的时候,直接会用到最高容量的产品,因为我们的 ...

  6. URAL 1416 Confidential (最小生成树+次小生成树)

    Description Zaphod Beeblebrox - President of the Imperial Galactic Government. And by chance he is a ...

  7. 配置多个ssh-key

    搞了三天没搞出来,还在男朋友面前哭了一场,真心觉得我只该吃屎,我好没用.哎.. 首先在上一篇记录了如何生成ssh-key,并使本地可以通过ssh的方式克隆和推送项目.但如果你有个github账号,有个 ...

  8. java数字转字符串前面自动补0或者其他数字

    /**  * Java里数字转字符串前面自动补0的实现.  *  * @author  xiaomo *  */  public class TestStringFormat {    public ...

  9. MySQL主从复制-指定数据库复制

    在/etc/my.cnf添加需要进行同步的数据库信息 #需要进行同步的数据库 #replicate-do-db=custmgr #replicate-do-db=sdata #replicate-ig ...

  10. MVVM模式用依赖注入的方式配置ViewModel并注册消息

    最初的想法 这次主要讨论下给View指定ViewModel的事情.一般来说给View指定ViewModel常用的方式有两种,一种是在View的后台代码中写DataContext = new ViewM ...