基于jquery實現(xiàn)省市區(qū)三級聯(lián)動效果
本文實現(xiàn)更新了項目的省市區(qū)三級聯(lián)動數(shù)據(jù),更新后最新的海南三沙都有,分享給所有需要的小伙伴們。
JQUERY + JSON,無數(shù)據(jù)庫,純JS代碼,無加密,無壓縮,可直接使用在任何項目中。
說明:數(shù)據(jù)來源于國家統(tǒng)計局官網(wǎng)。
先上圖:
綁定省市區(qū)
使用方法:
1. 引用JQUERY
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
2. 引用省市區(qū)數(shù)據(jù)
<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">所在區(qū)域</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("羅湖區(qū)"); });
源碼下載: 《基于jquery實現(xiàn)省市區(qū)三級聯(lián)動效果》
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助。
- jquery+php后臺實現(xiàn)省市區(qū)聯(lián)動功能示例
- 使用PHP+MySql+Ajax+jQuery實現(xiàn)省市區(qū)三級聯(lián)動功能示例
- jquery+ajax實現(xiàn)省市區(qū)三級聯(lián)動(封裝和不封裝兩種方式)
- jquery+ajax實現(xiàn)省市區(qū)三級聯(lián)動效果簡單示例
- 省市區(qū)三級聯(lián)動jquery實現(xiàn)代碼
- JSON+Jquery省市區(qū)三級聯(lián)動
- jquery實現(xiàn)的省市區(qū)三級聯(lián)動
- jQuery select表單提交省市區(qū)城市三級聯(lián)動核心代碼
- 基于jquery & json的省市區(qū)聯(lián)動代碼
- layui自定義插件citySelect實現(xiàn)省市區(qū)三級聯(lián)動選擇
相關文章
BootStrap glyphicon圖標無法顯示的解決方法
如果不注意bootstrap引入css和fonts的規(guī)范,則可能會導致bootstrap 在顯示glyphicon圖標時無法正常顯示,顯示為方框。該怎么解決呢?下面小編給大家解答下2016-09-09JQuery對checkbox操作 (循環(huán)獲?。?/a>
下面是Jquery對checkbox的一些操作,全選,反選,取消全選等等.2011-05-05基于jQuery和hwSlider實現(xiàn)內(nèi)容左右滑動切換效果附源碼下載(一)
本文結合實例給大家介紹如何實現(xiàn)內(nèi)容滑動切換的效果,包括左右箭頭切換,無限無縫滾動,圓點按鈕切換,動畫效果,自動切換效果,效果非常不錯,感興趣的朋友前來參考實現(xiàn)代碼2016-06-06jquery上傳插件fineuploader上傳文件使用方法(jquery圖片上傳插件)
這篇文章主要介紹了jquery插件fineuploader上傳文件很用方法2013-12-12