jquery省市区三级联动(数据来源国家统计局官网)内附源码下载
很久很久没有写博了。
今天更新了项目的省市区三级联动数据，更新后最新的海南三沙都有，分享给所有需要的小伙伴们。。。
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代码：
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>
4. JS代码：
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 });
源码下载：点击下载，解压密码 im531
