springmvc三级联动

来源：互联网发布：服务器域名是后缀吗编辑：程序博客网时间：2024/06/10 08:51

 //获取省市区 2     @RequestMapping(value="province.do") 3     @ResponseBody 4     public Map<String, Object> province(HttpServletRequest request,HttpServletResponse response,ModelMap map){ 5         List<ProvinceInfo> prList=ps.getAllProvinceInfo(); 6         Map<String, Object> modelMap = new HashMap<String, Object>();   7         modelMap.put("data", prList);   8         return modelMap; 9     }10     //获取市区11     @RequestMapping(value="city.do")12     @ResponseBody13     public Map<String, Object> city(HttpServletRequest request,HttpServletResponse response,int province_id,ModelMap map){14         List<CityInfo> cityList=ps.getCityInfoByFather(province_id);15         Map<String, Object> modelMap = new HashMap<String, Object>();  16         modelMap.put("data", cityList);17         return modelMap;18     }19     //获取区镇20     @RequestMapping(value="area.do")21     @ResponseBody22     public Map<String, Object> area(HttpServletRequest request,HttpServletResponse response,int city_id,ModelMap map){23         List<AreaInfo> areaList=ps.getAreaInfoByFather(city_id);24         Map<String, Object> modelMap = new HashMap<String, Object>();  25         modelMap.put("data", areaList);26         return modelMap;27     }

<div id="userAdd"> 2                               <span class="user-tip">服务地址：</span> 3                                   <!-- 省区(示例 辽宁省) --> 4                               <select id="Select1"> 5                                6                               </select> 7                               <!-- 市区(示例 营口市) --> 8                               <select id="Select2"></select>                              9                               <!-- 区(示例 站前区) -->10                               <select id="Select3"></select>11                               <input type="text" id="userInputAdd" value="请输入您的详细地址" />12                           </div>

/*初始化城市三级联动*/ 2         $.ajax({ 3              type:"get", 4              url:"province.do", 5              dataType : "json",   6              success:function(data){ 7                  var selPro = data.data[0]; 8                  $.each(data.data, function(i, item) {           9                      var $option = '<option code='+item.province_id+' value='+item.province_name+'>'+item.province_name+'</option>';10                      $('#Select1').append($option);11                  })12                  $('#Select1 option[value="'+selPro.province_name+'"]').attr("selected","true"); //当前省份默认选中13                   var cityUrl ='city.do?province_id='+selPro.province_id;//请求城市列表地址14                  $.ajax({15                      url:cityUrl,16                      success:function(data){17                          var selCity=data.data[0];18                          $.each(data.data,function(i,item){19                              var $option = '<option code='+item.city_id+' value='+item.city_name+'>'+item.city_name+'</option>';20                               $('#Select2').append($option);21                          })22                          $('#Select2 option[value="'+selCity.city_name+'"]').attr("selected","true"); //当前城市默认选中23                           var areaUrl ='area.do?city_id='+selCity.city_id; //请求区域列表地址24                          $.ajax({25                              url:areaUrl,26                              success:function(data){27                                  $.each(data.data,function(i,item){28                                      var $option = '<option code='+item.area_id+' value='+item.area_name+'>'+item.area_name+'</option>';29                                       $('#Select3').append($option);30                                  })31                                  $('#Select3').attr('area_id',$('#Select3').find('option').eq(0).attr('code'));32 33                              }34                          })35                      }36                  })37              }38         39         40         });41         42          //点击选择省份43          $('#Select1').change(function(){44              var _this=$(this);45              var provinceCode = _this.find('option:selected').attr('code');46              var cityUrl ='city.do?province_id='+provinceCode;47              masterAddrC(cityUrl,'Select2');48              setTimeout(function(){49                  var cityCode = $('#Select2').find('option').eq(0).attr('code');50                  var areaUrl = 'area.do?city_id='+cityCode;51                  masterAddrA(areaUrl,'Select3');52                  setTimeout(function(){53                      $('#Select1').attr('province_id',provinceCode);54                      $('#Select2').attr('city_id',$('#Select2').find('option').eq(0).attr('code'));55                       $('#Select3').attr('area_id',$('#Select3').find('option').eq(0).attr('code'));56                       57                  58                59                     60                  },300);61              },300);62          });63         //点击选择城市64          $('#Select2').change(function(){65              var _this=$(this);66              var cityCode = _this.find('option:selected').attr('code');67              var areaUrl = 'area.do?city_id='+cityCode;68              masterAddrA(areaUrl,'Select3');69              setTimeout(function(){70                  $('#Select2').attr('city_id',cityCode);71                  $('#Select3').attr('area_id',$('#Select3').find('option').eq(0).attr('code'));72                  73              },100);74          });75         //点击选择区76          $('#Select3').change(function(){77              var _this=$(this);78              var areaCode = _this.find('option:selected').attr('code');79              setTimeout(function(){80                  $('#Select3').attr('area_id',areaCode);81              },100);82          });

js最为复杂，逻辑需要一环扣一环，希望大家仔细思考。

还有一个忘说了，是jquery里的方法在js代码里的

  masterAddrC(cityUrl,'Select2'); 这句代码 是个填充方法，我放到了page.js当中代码贴起

 1    function masterAddrC(url,select){ 2             $.ajax({ 3                 url:url, 4                 success:function(data){ 5                      $('#'+select).html(''); 6                    $.each(data.data,function(i,item){ 7                          var $option = '<option code='+item.city_id+' value='+item.city_name+'>'+item.city_name+'</option>'; 8                         $('#'+select).append($option); 9                    });10                     11                 },12                 error:function(){13                     console.log("fail");14                     return;15                 }16             });17         }

0 0