jquery省市区三级联动

时间:2022-10-08 16:14:02

jquery省市区三级联动(数据来源国家统计局官网)内附源码下载

很久很久没有写博了。

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

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

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

先上图:

jquery省市区三级联动

绑定省市区

jquery省市区三级联动

使用方法:

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代码:

jquery省市区三级联动
 1 <div class="row">
2 <div class="col-sm-12">
3 <div class="form-group">
4 <label class="control-label col-sm-2">所在区域</label>
5 <div class="col-sm-3">
6 <select name="input_province" id="input_province" class="form-control">
7 </select>
8 </div>
9 <div class="col-sm-3">
10 <select name="input_city" id="input_city" class="form-control">
11 </select>
12 </div>
13 <div class="col-sm-3">
14 <select name="input_area" id="input_area" class="form-control">
15 </select>
16 </div>
17 </div>
18 </div>
19 </div>
jquery省市区三级联动

4. JS代码:

jquery省市区三级联动
 1     $(function () {
2 var html = "<option value=''>== 请选择 ==</option>"; $("#input_city").append(html); $("#input_area").append(html);
3 $.each(pdata,function(idx,item){
4 if (parseInt(item.level) == 0) {
5 html += "<option value='" + item.names + "' exid='" + item.code + "'>" + item.names + "</option>";
6 }
7 });
8 $("#input_province").append(html);
9
10 $("#input_province").change(function(){
11 if ($(this).val() == "") return;
12 $("#input_city option").remove(); $("#input_area option").remove();
13 var code = $(this).find("option:selected").attr("exid"); code = code.substring(0,2);
14 var html = "<option value=''>== 请选择 ==</option>"; $("#input_area").append(html);
15 $.each(pdata,function(idx,item){
16 if (parseInt(item.level) == 1 && code == item.code.substring(0,2)) {
17 html += "<option value='" + item.names + "' exid='" + item.code + "'>" + item.names + "</option>";
18 }
19 });
20 $("#input_city").append(html);
21 });
22
23 $("#input_city").change(function(){
24 if ($(this).val() == "") return;
25 $("#input_area option").remove();
26 var code = $(this).find("option:selected").attr("exid"); code = code.substring(0,4);
27 var html = "<option value=''>== 请选择 ==</option>";
28 $.each(pdata,function(idx,item){
29 if (parseInt(item.level) == 2 && code == item.code.substring(0,4)) {
30 html += "<option value='" + item.names + "' exid='" + item.code + "'>" + item.names + "</option>";
31 }
32 });
33 $("#input_area").append(html);
34 });
35 //绑定
36 $("#input_province").val("广东省");$("#input_province").change();
37 $("#input_city").val("深圳市");$("#input_city").change();
38 $("#input_area").val("罗湖区");
39
40 });
jquery省市区三级联动

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