城市三級聯動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;
                }
            });
        }