城市三级联动Springmvc+mysql

浏览数：31 / 时间：2015年06月12日

昨天我做了一个功能，就是一个简单的城市三级联动，现在贴上分享

是采用springmvc+mysql去做的，最后台的东西我就不写了，就是写控制层+HTML+Jquery的部分，以下是控制层

 1  //获取省市区
 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     @ResponseBody
13     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     @ResponseBody
22     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     }

以下是HTML

 1 <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>

最后是Jquery

 1   /*初始化城市三级联动*/
 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         }