bootstrap三級(jí)聯(lián)動(dòng)很常用,必備
本文實(shí)例就為大家分享了Bootstrap實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)的具體代碼,供大家參考,具體內(nèi)容如下
html頁面
<!-- 省市區(qū)三級(jí)聯(lián)動(dòng) begin --> <div class="form-group"> <label class="col-sm-2 control-label"><i>*</i>所在地址</label> <div class="col-sm-3"> <select name="input_province" id="input_province" class="form-control" > <option value="">--請(qǐng)選擇--</option> </select> </div> <div class="col-sm-3"> <select name="input_city" id="input_city" class="form-control"> <option value=""></option> </select> </div> <div class="col-sm-3"> <select name="input_area" id="input_area" class="form-control"> <option value=""></option> </select> </div> </div> <!-- 省市區(qū)三級(jí)聯(lián)動(dòng) end-->
js部分
<!-- 三級(jí)聯(lián)動(dòng) begin --> <script type="text/javascript" src="https://www.gxlcms.com/js/plugins/address/address.js"></script> <script > $(function () { var html = ""; $("#input_city").append(html); $("#input_area").append(html); $.each(pdata,function(idx,item){ if (parseInt(item.level) == 0) { html += "<option value="+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"); var code = $(this).find("option:selected").val(); code = code.substring(0,2); var html = "<option value=''>--請(qǐng)選擇--</option>"; $("#input_area option").append(html); $.each(pdata,function(idx,item){ if (parseInt(item.level) == 1 && code == item.code.substring(0,2)) { html +="<option value="+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").val(); 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.code+" >"+ item.names +"</option> "; } }); $("#input_area ").append(html); }); }); </script> <!-- 三級(jí)聯(lián)動(dòng) end -->
我把js文件給上傳上來了,點(diǎn)擊這里
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com