很多应用场景都会用到地区联动的功能
一样,很多人会用BootStrap前端框架
如果上述两个条件你都满足了,恭喜你,你可能需要下面这款插件:
基于bootstrap的地区三级联动组件
<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="">--请选择--</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>
$(function () { var html = ""; $("#input_city").append(html); $("#input_area").append(html); $.each(pdata,function(idx,item){ if (parseInt(item.level) == 0) { html += "" + item.names + ""; } }); $("#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 = "--请选择--"; $("#input_area").append(html); $.each(pdata,function(idx,item){ if (parseInt(item.level) == 1 && code == item.code.substring(0,2)) { html += "" + item.names + ""; } }); $("#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 = "--请选择--"; $.each(pdata,function(idx,item){ if (parseInt(item.level) == 2 && code == item.code.substring(0,4)) { html += "" + item.names + ""; } }); $("#input_area").append(html); }); });
然后页面引入下方提供的address.js文件就可以生效了。
你很优秀!
历害害阿海
这个不需要有什么后台吧? 地址库在json文件里。如果想自己追求后台地区区域管理功能,可以自己拓展开发!
地址不是存于数据库里的吗
地址在云盘下载文件中,是json文件,如果需要使用sql文件,需要自己拓展开发
怎么下载js
找到啦,非常感谢作者提供
这么多人都在用的很OK,到你这里成了错误一堆,坑了一笔。好吧,一笔!
你能用吗,我的数据好像渲染不上去
不知道是版本原因还是怎么的,引入的无法使用,需要改
紫色字体,后来者注意。谢谢分享!
请教下数据渲染不进去的问题
你可以用么?
赞