笔记：SSH遇到的问题之省市区根据数据库实现三级联动以及数据回显

省市区的三级联动

后台action代码：

//接收Json数据
		private String result;
		
		public String getResult() {
			return result;
		}

		public void setResult(String result) {
			this.result = result;
		}

//获得省份集合
	public String getProvince(){
		List<City> list=cityService.getProvince();
		Gson json = new GsonBuilder().enableComplexMapKeySerialization().create();
		result=json.toJson(list);
		return SUCCESS;
	}
	//获得市的集合
	public String getCity(){
		String getProvinceId=request.getParameter("provinceId");
		//log.info("从页面获得的provinceid:"+getProvinceId);
		Integer provinceId=Integer.valueOf(getProvinceId);
		List<City> list=cityService.getCity(provinceId);
		Gson json = new GsonBuilder().enableComplexMapKeySerialization().create();
		result=json.toJson(list);
		return SUCCESS;
	}
	//获得区的集合
	public String getArea(){
		String getCityID=request.getParameter("cityId");
		//log.info("从页面获得的cityid:"+getCityID);
		Integer cityId=Integer.valueOf(getCityID);
		List<City> list=cityService.getArea(cityId);
		Gson json = new GsonBuilder().enableComplexMapKeySerialization().create();
		result=json.toJson(list);
		//log.info(result);
		return SUCCESS;
	}

struts配置文件代码

<!-- 这里result name默认为success -->
<result type="json">
		<param name="root">result</param>
</result>

html代码

<tr>
         <td align="right"><span class="star_red">*</span>任职城市&nbsp;:</td>
         <td>
                            
           <select class="post_select_short" id="province" name="province">
                <!-- 回显的时候不需要这个提示 -->
               <option selected value="">请选择</option>
           </select>
                                
           <select class="post_select_short" id="city" name="city" >
                  </select>
                                
           <select class="post_select_short" id="area" name="area">
                  </select>
         </td>
</tr>

js代码

（提交表单）

<script type="text/javascript">
                       /**
                       	 * 省市区的三级联动 
                        */
                        
	//获得省
	$(document).ready(function(){
		$.ajax({
			url:"xxx.action",
			dataType:"json",//设置需要返回的数据类型
			success:function(data){
				var d = eval("("+data+")");
				if(!data) return;
			var html="";
			for(var i in d){
				html+='<option value='+d[i].id+'>'+d[i].atitle+'</option>';
			}
			$("#province").append(html);
			$("#province").change(function(){
				$("#city").html("");
				$("#area").html("");
				getCity(city,area);
				/* alert("*******************************");
				alert($(this).val());
				alert($("#province").val()); */
			});
			}
		});
	});
	//获得市
	function getCity(city,area){
		$.ajax({
			url:"xxx.action",
			data:{provinceId:$("#province").val()},
			dataType:"json",//设置需要返回的数据类型
			success:function(data){
				var d = eval("("+data+")");
				if(!data) return;
				var html='';
				for(var i in d){
					html+='<option value='+d[i].id+'>'+d[i].atitle+'</option>';
				}
				$("#city").append(html);
				$("#city").change(function(){
					$("#area").html('');
					getArea(area);
				});
				$("#city").get(0).selectedIndex=0;//默认选择第一项 
				getArea(area); 
			}
		});
	}
	//获得区
	function getArea(area){
		$.ajax({
			url:"xxx.action",
			data:{cityId:$("#city").val()},
			dataType:"json",//设置需要返回的数据类型
			success:function(data){
				/* alert("可以获得数据!");
				alert(data); */
				var d = eval("("+data+")");
				if(!data) return;
				var html='';
				for(var i in d){
					html+='<option value='+d[i].id+'>'+d[i].atitle+'</option>';
				}
				$("#area").append(html);
			}
		});
	}
</script>

（数据回显）

<script type="text/javascript">
                       /**
                       	 * 省市区的三级联动 回显
                        */
                        
	//获得省
	$(document).ready(function(){
		//获取后台传递的值 
		var city='${require.city}';
		var citys=city.split(" ");
		$.ajax({
			url:"require_getProvince.action",
			dataType:"json",//设置需要返回的数据类型
			success:function(data){
				var d = eval("("+data+")");
				if(!data) return;
			var html="";
			for(var i in d){
				html+='<option value='+d[i].id+'>'+d[i].atitle+'</option>';
			}
			$("#province").append(html);
			
			$("#province option").each(function(){
				if($(this).text()==citys[0]){
					$(this).attr("selected",true);
					getCity(citys[1],citys[2]);
				}
			})
			
			$("#province").change(function(){
				$("#city").html("");
				$("#area").html("");
				getCity(null,null);//省份改动的话,重置市和区 
			});
			}
		});
	});
	//获得市
	function getCity(city,area){
		$.ajax({
			url:"require_getCity.action",
			data:{provinceId:$("#province").val()},
			dataType:"json",//设置需要返回的数据类型
			success:function(data){
				var d = eval("("+data+")");
				if(!data) return;
				var html='';
				for(var i in d){
					html+='<option value='+d[i].id+'>'+d[i].atitle+'</option>';
				}
				$("#city").append(html);
				
				if(city!=null){
                    $("#city option").each(function(){
                        if($(this).text()==city){
                            $(this).attr("selected",true);
                        getArea(area);     
                    	}
                    })
				}
				
				$("#city").change(function(){
					$("#area").html('');
					getArea(null);//市改动的话，重置区
				});
				//$("#city").get(0).selectedIndex=0;//默认选择第一项 
				getArea(null); 
			}
		});
	}
	//获得区
	function getArea(area){
		$.ajax({
			url:"require_getArea.action",
			data:{cityId:$("#city").val()},
			dataType:"json",//设置需要返回的数据类型
			success:function(data){
				/* alert("可以获得数据!");
				alert(data); */
				var d = eval("("+data+")");
				if(!data) return;
				var html='';
				for(var i in d){
					html+='<option value='+d[i].id+'>'+d[i].atitle+'</option>';
				}
				$("#area").append(html);
				if(area!=null){
                    $("#area option").each(function(){
                    	if($(this).text()==area){
                            $(this).attr("selected",true);
                        }
                    })
				}
				
			}
		});
	}
</script>