【转】Jquery 实现select 3级级联查询

原文地址：https://www.cnblogs.com/kenhome/p/7728181.html

 实现级联效果的思路：

1、 页面加载时，先显示第一级select，第二、三级的select隐藏，根据第一级select值的改变，再显示第二级select，依次类推；

2、只从后台获取第一级select的数据，第二级select的选项数据根据第一级select值的改变再动态更新，第三级select的选项数据再根据第二级select值的改变再做动态更新；

一、基于Jquery的jsp实现步骤：

1、页面引入Jquery插件：

<script src="${pageContext.request.contextPath}/resources/js/jquery-3.0.0.min.js"></script>

2、页面加入三级的select标签：

<!-- 一级select -->  
           <div >         
              <select   id="select-first"  name="categoryId"  data-getDataUrl="${pageContext.request.contextPath}/admin/spu/spu/getsonCategory">
                  <option value=''>请选择分类</option>
                  <c:forEach items="${rootCategorys}" var="rootCategory" varStatus="statu">
                    <option value="${rootCategory.id}" ${params.firstValue ==rootCategory.id  ? 'selected="selected"' :''}  >${rootCategory.categoryName}</option>
                  </c:forEach>                 
              </select>
           </div>
           <!-- 二级select -->
           <div  id="box-select-second" style="display:none;" >         
              <select   id="select-second" name="sonCategoryId"  data-getDataUrl="${pageContext.request.contextPath}/admin/spu/spu/getsonCategory" >                                         
             
              </select>
           </div>
            <!-- 三级select -->
           <div  id="box-select-third" style="display:none;" >         
              <select    id="select-third"  name="grandsoncategoryId"  data-getDataUrl="${pageContext.request.contextPath}/admin/spu/spu/getsonCategory" >  
                              
              </select>
           </div>       

3、使用jquery的change()方法,可以监听select的值一旦发生改变，就触发事件；

     使用$.ajax()异步方法请求后台数据，成功返回数据添加到下级select选项中：

  //级联select:一级select的值发生改变，触发二级的选项改变
              $("#select-first").change(function(){
                  //清空二级和三级select的旧选项
                  $("#select-second").empty();
                  $("#select-third").empty();
                  //请求二级select选项数据地址
                  var targetUrl = $(this).attr("data-getDataUrl");
                  //获得一级select的值
                  var firstValue = $(this).val();                  
                  //如果一级select的值为null，隐藏二、三级select,并返回
                  if(firstValue == ''){
                      $("#select-second").fadeOut("slow");
                      $("#select-third").fadeOut("slow");
                      return;
                  }            
                 
                 //根据一级select的值，异步获取数据更新二级的选项             
                  $.ajax({    
                      type:'get',        
                      url:targetUrl,    
                      data:{
                          parentId:firstValue
                      },    
                      cache:false,    
                      dataType:'json',    
                      success:function(secondDatas){                              
                          
                          //遍历回传的数据添加到二级select
                            $.each(secondDatas, function(key, secondData) {
                               
                                   var option = '<option value="'+secondData.id+'">'+secondData.categoryName+'</option>'      
                                   $("#select-second").append(option)
                                   
                            })                            
                            
                            //二级select展示
                           $("#box-select-second").fadeIn("slow");
                            //三级select隐藏
                              $("#box-select-third").fadeOut("slow");                                                 
                      },
                      error:function(){ 
                          alert("请求失败")
                        }
                   });                  
              });
              
              //级联select:二级select值改变，触发三级select变化
              $("#select-second").change(function(){
                  //清空三级slect的旧选项                
                  $("#select-third").empty();
                  //请求二级select选项数据地址
                  var targetUrl = $(this).attr("data-getDataUrl");
                  //二级select的值
                  var secondValue = $(this).val();
                  //如果一级select的值为null，隐藏三级select,并返回
                  if(secondValue == ''){                    
                      $("#select-third").fadeOut("slow");
                      return;
                  } 
                  //根据二级select的值，异步获取数据更新三级的选项    
                  $.ajax({    
                      type:'get',        
                      url:targetUrl,    
                      data:{
                          parentId:secondValue
                      },    
                      cache:false,    
                      dataType:'json',    
                      success:function(thirdDatas){                              
                          
                          //遍历回传的数据添加到三级select
                            $.each(thirdDatas, function(key, thirdData) {
                               
                                   var option = '<option value="'+thirdData.id+'">'+thirdData.categoryName+'</option>'      
                                   $("#select-third").append(option)
                                   
                            })
                            
                             //三级select显示出来
                              $("#box-select-third").fadeIn("slow");                                                 
                      },
                      error:function(){ 
                          alert("请求失败")
                        }
                   });                  
              });

实战

 <div class="layui-inline" id="cityInfo">
    <label class="layui-form-label ">区域</label>
    <div class="layui-input-inline">
          <select name="RegionCode" lay-filter="select-region" lay-search="" id="Region"></select>
    </div>
    <label class="layui-form-label layui-form-label1">省份</label>
   <div class="layui-input-inline">
        <select name="ProvinceCode" lay-filter="select-province" lay-search="" id="Province"></select>
    </div>
 <label class="layui-form-label ">城市</label>
  <div class="layui-input-inline firstcol">
       <select name="AreaCode" lay-filter="select-city" lay-search="" id="Area"></select>
  </div>
</div>

          //大区省市数据加载
                _LoadAreaData = function () {
                    var url = '/api/xx/GetProvinceCityList';
                    var data = {};
                    pl._Ajax(url, data, function (res) {
                        var tplHtml = tplRegion.innerHTML;
                        tpl(tplHtml).render({ list: res.rows.ListCity }, function (html) {
                            document.getElementById('Area').innerHTML = html;
                        });
                        // tpl(tplHtml).render({ list: res.rows.ListProvince }, function (html) {
                        //     document.getElementById('Province').innerHTML = html;
                        // });
                        // tpl(tplHtml).render({ list: res.rows.ListRegion }, function (html) {
                        //     document.getElementById('Region').innerHTML = html;
                        // });
                        form.render();
                        _selectChangeLink();
                    }, function (a, b, c) {
                        layer.msg('网络异常，请稍后重试！', { offset: '6px' });
                    });
                }
                //根据type获取对应的信息
                _LoadProvinceCityData = function (type, pcode, fn) {
                    var url = "", tplHtml = tplRegion.innerHTML, parentDiv = "";

                    var data = {
                        IsPage: false,
                    };
                    if (type == 1) {
                        url = "/api/xx/GetLargeRegionList";
                        parentDiv = "Region";
                    }
                    else if (type == 2) {
                        url = "/api/xx/GetProvinceList";
                        parentDiv = "Province";
                        if (!!pcode) {
                            data.PrentCode = pcode;
                        }
                    }
                    else if (type == 3) {
                        url = "/api/xx/GetAreaCityList";
                        parentDiv = "Area";
                        if (!!pcode) {
                            data.PrentCode = pcode;
                        }
                    }
                    else {
                        return;
                    }

                    pl._Ajax(url, data, function (res) {
                        tpl(tplHtml).render({ list: res.rows }, function (html) {
                            document.getElementById(parentDiv).innerHTML = html;
                        });
                        if (fn) {
                            fn();
                        }
                        form.render();
                        _selectChangeLink(type);
                    }, function (a, b, c) {
                        layer.msg('网络异常，请稍后重试！', { offset: '6px' });
                    });
                };
                //根据当前节点编码获取父级
                _LoadParentData = function (type, code) {
                    var url = "/api/xx/GetParentRegion";
                    var data = {};
                    data.RegCode = code;
                    pl._Ajax(url, data, function (res) {
                        if (type == 2) {
                            $('select[name="RegionCode"]').val(res.rows[0].RegCode);
                            form.render();
                        }
                        else if (type == 3) {
                            // $('select[name="RegionCode"]').val(res.rows[0].RegCode);
                            // $('select[name="ProvinceCode"]').val(res.rows[1].RegCode);
                            var cityName = $('select[name="AreaCode"]').find('option[value="' + $('select[name="AreaCode"]').val() + '"]').text();
                            $('#cityInfo').text(res.rows[0].RegName + '-' + res.rows[1].RegName + '-' + cityName);
                            $('#cityInfo').attr('data-RegionCode', res.rows[0].RegCode);
                            $('#cityInfo').attr('data-RegionName', res.rows[0].RegName);
                            $('#cityInfo').attr('data-ProvinceCode', res.rows[1].RegCode);
                            $('#cityInfo').attr('data-ProvinceName', res.rows[1].RegName);
                            $('#cityInfo').attr('data-AreaName', cityName);
                            form.render();
                        }
                        else {
                            return;
                        }
                        form.render();
                    }, function (a, b, c) {
                        layer.msg('网络异常，请稍后重试！', { offset: '6px' });
                    });
                };

        _selectChangeLink = function (type) {
                    form.on('select(select-region)', function (data) {
                        var code = data.value;
                        if (!code) {
                            return;
                        }
                        _LoadProvinceCityData(2, code);
                        //清空城市数据
                        _LoadProvinceCityData(3, "three");
                    });

                    form.on('select(select-province)', function (data) {
                        var code = data.value;
                        if (!code) {
                            return;
                        }
                        _LoadProvinceCityData(3, code);
                        _LoadParentData(2, code);
                    });

                    form.on('select(select-city)', function (data) {
                        var code = data.value;
                        if (!code) {
                            return;
                        }
                        _LoadParentData(3, code);
                    });

                };