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

 更新时间:2019年07月26日 15:15:35   作者:是金子早晚要花光  
这篇文章主要为大家详细介绍了Bootstrap实现省市区三级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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中关于执行环境的杂谈

    如你所知,javascript里执行环境是作为一个最核心的概念存在的。相信广大FE筒子们对于这个概念不会陌生,它定义了变量或函数有权访问其他数据范围以及其行为。
    2011-08-08
  • Web网站都变成灰色有哪些方法可以快速实现(解决方案)

    Web网站都变成灰色有哪些方法可以快速实现(解决方案)

    有些时候我们需要把网站页面变成黑白色或灰色,特别是对于一些需要悼念的日子,以及一些影响力很大的伟人逝世或纪念日的时候,都会让网站的全部网页变成灰色(黑白色),以表示我们对逝者或者英雄的缅怀和悼念
    2022-12-12
  • js禁止浏览器的回退事件

    js禁止浏览器的回退事件

    这篇文章主要为大家详细介绍了js禁止浏览器的回退事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 微信小程序使用picker组件出现的问题探究

    微信小程序使用picker组件出现的问题探究

    这篇文章主要介绍了微信小程序自定义可搜索的picker组件,主要包括自定义可搜索的picker组件的代码以及调用实例,这里的搜索框使用的是vant微信小程序组件库,picker使用的微信小程序的原生组件,需要的朋友可以参考下
    2023-01-01
  • webpack踩坑之路图片的路径与打包

    webpack踩坑之路图片的路径与打包

    这篇文章主要介绍了webpack踩坑之路图片的路径与打包,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • url 编码 js url传参中文乱码解决方案

    url 编码 js url传参中文乱码解决方案

    前后台用js传参过程中,如果是中文就容易出现乱码,所以最好是先编码。
    2010-04-04
  • Bootstrap每天必学之按钮(一)

    Bootstrap每天必学之按钮(一)

    Bootstrap每天必学之按钮,本文讲解的就是大家最为常用的button按钮的样式,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • Echarts中legend属性使用的方法详解

    Echarts中legend属性使用的方法详解

    Echarts可以帮助我们快速构建柱状图、饼图、条形图,这对于多图形化展示数据来说尤其方便,可帮助我们快速开发,下面这篇文章主要给大家介绍了关于Echarts中legend属性使用的相关资料,需要的朋友可以参考下
    2022-04-04
  • JS点击链接后慢慢展开隐藏着图片的方法

    JS点击链接后慢慢展开隐藏着图片的方法

    这篇文章主要介绍了JS点击链接后慢慢展开隐藏着图片的方法,实例分析了javascript操作图片的隐藏与现实技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • js正则表达式之前瞻后顾与非捕获分组

    js正则表达式之前瞻后顾与非捕获分组

    话说自从学前端以来听到过多次这样的"笑话",程序员分为会正则的和不会正则的,可见正则的重要性,这篇文章主要给大家介绍了关于js正则表达式之前瞻后顾与非捕获分组的相关资料,需要的朋友可以参考下
    2021-10-10

最新评论