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


Posted in Javascript onJuly 26, 2019

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文件给上传上来了,点击这里

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
jquery+json实现分页效果
Mar 07 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
layui实现下拉框三级联动
Jul 26 #Javascript
layui添加动态菜单与选项卡
Jul 26 #Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 #Javascript
javascript中的闭包概念与用法实践分析
Jul 26 #Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 #Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 #Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 #jQuery
You might like
第十二节 类的自动加载 [12]
2006/10/09 PHP
php构造函数实例讲解
2013/11/13 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
php新建文件的方法实例
2019/09/26 PHP
php中yii框架实例用法
2020/12/22 PHP
javascript 框架小结 个人工作经验
2009/06/13 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
Python的time模块中的常用方法整理
2015/06/18 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
寄语是什么意思
2014/04/10 职场文书
庆七一活动总结
2014/08/27 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python