bootstrap三级联动很常用,必备
本文实例就为大家分享了Bootstrap实现省市区三级联动的具体代码,供大家参考,具体内容如下
html页面
<!-- 省市区三级联动 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="">--请选择--</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> <!-- 省市区三级联动 end-->
js部分
<!-- 三级联动 begin --> <script type="text/javascript" src="/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文件给上传上来了,点击这里
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持菜鸟教程(cainiaojc.com)。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#cainiaojc.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。