基于jquery實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果
本文實(shí)現(xiàn)更新了項(xiàng)目的省市區(qū)三級(jí)聯(lián)動(dòng)數(shù)據(jù),更新后最新的海南三沙都有,分享給所有需要的小伙伴們。
JQUERY + JSON,無(wú)數(shù)據(jù)庫(kù),純JS代碼,無(wú)加密,無(wú)壓縮,可直接使用在任何項(xiàng)目中。
說(shuō)明:數(shù)據(jù)來(lái)源于國(guó)家統(tǒng)計(jì)局官網(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=''>== 請(qǐng)選擇 ==</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=''>== 請(qǐng)選擇 ==</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=''>== 請(qǐng)選擇 ==</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實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果》
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- jquery+php后臺(tái)實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)功能示例
- 使用PHP+MySql+Ajax+jQuery實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)功能示例
- jquery+ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)(封裝和不封裝兩種方式)
- jquery+ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果簡(jiǎn)單示例
- 省市區(qū)三級(jí)聯(lián)動(dòng)jquery實(shí)現(xiàn)代碼
- JSON+Jquery省市區(qū)三級(jí)聯(lián)動(dòng)
- jquery實(shí)現(xiàn)的省市區(qū)三級(jí)聯(lián)動(dòng)
- jQuery select表單提交省市區(qū)城市三級(jí)聯(lián)動(dòng)核心代碼
- 基于jquery & json的省市區(qū)聯(lián)動(dòng)代碼
- layui自定義插件citySelect實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)選擇
相關(guān)文章
BootStrap glyphicon圖標(biāo)無(wú)法顯示的解決方法
如果不注意bootstrap引入css和fonts的規(guī)范,則可能會(huì)導(dǎo)致bootstrap 在顯示glyphicon圖標(biāo)時(shí)無(wú)法正常顯示,顯示為方框。該怎么解決呢?下面小編給大家解答下2016-09-09jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)預(yù)覽圖片大圖效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)預(yù)覽圖片大圖效果的方法,涉及jQuery鼠標(biāo)事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2017-04-04

基于jQuery和hwSlider實(shí)現(xiàn)內(nèi)容左右滑動(dòng)切換效果附源碼下載(一)

jquery上傳插件fineuploader上傳文件使用方法(jquery圖片上傳插件)

實(shí)例詳解jQuery的無(wú)new構(gòu)建