城市三级联动Springmvc+mysql
昨天我做了一个功能，就是一个简单的城市三级联动，现在贴上分享
是采用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 }
