Bootstrap实现省市区三级联动(亲测可用)
2019-07-26 15:15
3499 查看
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文件给上传上来了,点击这里
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- 省市区三级联动下拉菜单的实现(含最新行政区划数据)
- WheelView实现省市区三级联动(数据库实现版本号附带完整SQL及数据)
- Android UI控件之Spinner实现省市区三级联动
- 省市区三级联动select下拉框,下拉框数据回显 Demo js脚本实现带脚本与案例,整理好了的下载既可用
- php ajax 实现三级省市区联动
- Android UI控件之Spinner实现省市区三级联动
- vue+iview实现省市区三级联动
- jquery实现省市区三级联动
- 原生javascript实现省市区三级联动
- javascript实现省市区三级联动下拉框菜单
- Android UI控件之Spinner实现省市区三级联动
- 调用QQ官方JS插件实现省市区三级联动
- thinkPHP实现的省市区三级联动功能示例
- C# 实现 省市区三级联动(表中包含经纬度取自淘宝地址管理)
- Android中使用开源框架citypickerview实现省市区三级联动选择
- Android开发之实现省市区三级联动
- 用js读取XML数据实现省市区的三级联动
- java的JCombobox实现中国省市区三级联动
- 用jQuery实现省市区三级联动(可做插件)
- chosen实现省市区三级联动