城市三级联动Springmvc+mysql

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

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

 //获取省市区
    @RequestMapping(value="province.do")
    @ResponseBody
    public Map<String, Object> province(HttpServletRequest request,HttpServletResponse response,ModelMap map){
        List<ProvinceInfo> prList=ps.getAllProvinceInfo();
        Map<String, Object> modelMap = new HashMap<String, Object>();  
        modelMap.put("data", prList);  
        return modelMap;
    }
    //获取市区
    @RequestMapping(value="city.do")
    @ResponseBody
    public Map<String, Object> city(HttpServletRequest request,HttpServletResponse response,int province_id,ModelMap map){
        List<CityInfo> cityList=ps.getCityInfoByFather(province_id);
        Map<String, Object> modelMap = new HashMap<String, Object>();  
        modelMap.put("data", cityList);
        return modelMap;
    }
    //获取区镇
    @RequestMapping(value="area.do")
    @ResponseBody
    public Map<String, Object> area(HttpServletRequest request,HttpServletResponse response,int city_id,ModelMap map){
        List<AreaInfo> areaList=ps.getAreaInfoByFather(city_id);
        Map<String, Object> modelMap = new HashMap<String, Object>();  
        modelMap.put("data", areaList);
        return modelMap;
    }

 以下是HTML

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

最后是Jquery

  /*初始化城市三级联动*/
        $.ajax({
             type:"get",
             url:"province.do",
             dataType : "json",  
             success:function(data){
                 var selPro = data.data[0];
                 $.each(data.data, function(i, item) {          
                     var $option = '<option code='+item.province_id+' value='+item.province_name+'>'+item.province_name+'</option>';
                     $('#Select1').append($option);
                 })
                 $('#Select1 option[value="'+selPro.province_name+'"]').attr("selected","true"); //当前省份默认选中
                  var cityUrl ='city.do?province_id='+selPro.province_id;//请求城市列表地址
                 $.ajax({
                     url:cityUrl,
                     success:function(data){
                         var selCity=data.data[0];
                         $.each(data.data,function(i,item){
                             var $option = '<option code='+item.city_id+' value='+item.city_name+'>'+item.city_name+'</option>';
                              $('#Select2').append($option);
                         })
                         $('#Select2 option[value="'+selCity.city_name+'"]').attr("selected","true"); //当前城市默认选中
                          var areaUrl ='area.do?city_id='+selCity.city_id; //请求区域列表地址
                         $.ajax({
                             url:areaUrl,
                             success:function(data){
                                 $.each(data.data,function(i,item){
                                     var $option = '<option code='+item.area_id+' value='+item.area_name+'>'+item.area_name+'</option>';
                                      $('#Select3').append($option);
                                 })
                                 $('#Select3').attr('area_id',$('#Select3').find('option').eq(0).attr('code'));

                             }
                         })
                     }
                 })
             }
        
        
        });
        
         //点击选择省份
         $('#Select1').change(function(){
             var _this=$(this);
             var provinceCode = _this.find('option:selected').attr('code');
             var cityUrl ='city.do?province_id='+provinceCode;
             masterAddrC(cityUrl,'Select2');
             setTimeout(function(){
                 var cityCode = $('#Select2').find('option').eq(0).attr('code');
                 var areaUrl = 'area.do?city_id='+cityCode;
                 masterAddrA(areaUrl,'Select3');
                 setTimeout(function(){
                     $('#Select1').attr('province_id',provinceCode);
                     $('#Select2').attr('city_id',$('#Select2').find('option').eq(0).attr('code'));
                      $('#Select3').attr('area_id',$('#Select3').find('option').eq(0).attr('code'));
                      
                 
               
                    
                 },300);
             },300);
         });
        //点击选择城市
         $('#Select2').change(function(){
             var _this=$(this);
             var cityCode = _this.find('option:selected').attr('code');
             var areaUrl = 'area.do?city_id='+cityCode;
             masterAddrA(areaUrl,'Select3');
             setTimeout(function(){
                 $('#Select2').attr('city_id',cityCode);
                 $('#Select3').attr('area_id',$('#Select3').find('option').eq(0).attr('code'));
                 
             },100);
         });
        //点击选择区
         $('#Select3').change(function(){
             var _this=$(this);
             var areaCode = _this.find('option:selected').attr('code');
             setTimeout(function(){
                 $('#Select3').attr('area_id',areaCode);
             },100);
         });

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

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

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

   function masterAddrC(url,select){
            $.ajax({
                url:url,
                success:function(data){
                     $('#'+select).html('');
                   $.each(data.data,function(i,item){
                         var $option = '<option code='+item.city_id+' value='+item.city_name+'>'+item.city_name+'</option>';
                        $('#'+select).append($option);
                   });
                    
                },
                error:function(){
                    console.log("fail");
                    return;
                }
            });
        }