Bootstrap实现省市区三级联动(亲测可用)

<!-- 省市区三级联动 begin --> <div> <label><i>*</i>所在地址</label> <div> <select > <option value="">--请选择--</option> </select> </div> <div> <select> <option value=""></option> </select> </div> <div> <select> <option value=""></option> </select> </div> </div> <!-- 省市区三级联动 end-->

js部分

<!-- 三级联动 begin --> <script type="text/javascript" src="https://www.jb51.net/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=''>--请选择--</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=''>--请选择--</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> <!-- 三级联动 end -->

我把js文件给上传上来了,点击这里

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/c5e27d72224c398ee6b1d7afec4aba7e.html