昨天我做了一个功能，就是一个简单的城市三级联动，现在贴上分享
是采用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 }
时间： 2024-08-05 11:01:27