很久很久沒有寫博了。
今天更新了項目的省市區三級聯動數據，更新后最新的海南三沙都有，分享給所有需要的小伙伴們。。。
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
某某公司又有神馬 猝死 的，，，生命是革命的本錢，洗洗睡覺。。。