省市區的三級聯動

後臺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:"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").change(function(){
				$("#city").html("");
				$("#area").html("");
				getCity(city,area);
				/* alert("*******************************");
				alert($(this).val());
				alert($("#province").val()); */
			});
			}
		});
	});
	//獲得市
	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);
				$("#city").change(function(){
					$("#area").html('');
					getArea(area);
				});
				$("#city").get(0).selectedIndex=0;//預設選擇第一項 
				getArea(area); 
			}
		});
	}
	//獲得區
	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);
			}
		});
	}
</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>