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 相关文章推荐
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
JS实现点击事件统计的简单实例
Jul 10 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
几种响应式文字详解
May 19 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 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
ThinkPHP php 框架学习笔记
2009/10/30 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
Three.js基础学习之场景对象
2017/09/27 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
python之拟合的实现
2019/07/19 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
python tkinter控件布局项目实例
2019/11/04 Python
python实现字典嵌套列表取值
2019/12/16 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
数据库基础的一些面试题
2012/02/25 面试题
Ajax主要包含了哪些技术
2014/06/12 面试题
企业为何需要商业计划书
2013/12/26 职场文书
企业职业病防治方案
2014/05/29 职场文书
服装设计专业自荐信
2014/06/17 职场文书
化学教育专业自荐信
2014/07/04 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
MySQL存储过程及语法详解
2022/08/05 MySQL