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
某某公司又有神马 猝死 的，，，生命是革命的本钱，洗洗睡觉。。。
