jquery實現三級聯動 +struts2 +ajax

跳轉頁面代碼：

public String indictDetail(){
            。。。。。。。。。。。。。。。。
			// 業務處理
			initProblemType();
			initproblemRespon();
		        return "indictDet。。。。。。。。。。。。。。
	}

後臺代碼：

public String listTypeone() {
		try {
			if (indictBusiness == null) {
				indictBusiness = new IndictBusiness();
			}
			List<IndictBusiness> list = indictInfoManager.listTypeone(indictBusiness);
			setResult("typeone", list);
		} catch (BusinessException e) {
			logger.error("一級菜單異常!", e);
			setResultMessage("一級菜單異常");
			return ERROR;
		} 
		return SUCCESS;
	}
	public String listTypetwo() {
		JsonOut out=getJsonOut();
		PrintWriter writer ;
		try {
			writer = getHttpServletResponse().getWriter();
			if (indictBusiness == null) {
				indictBusiness = new IndictBusiness();
			}
			List<IndictBusiness> list = indictInfoManager.listTypetwo(indictBusiness);
//			setResult("typetwo", list);
			out.put("typetwoList", list); 
			writer.print(out);
		} catch (BusinessException e) {
			logger.error("二級菜單異常!", e);
			setResultMessage("二級菜單異常");
			return ERROR;
		} catch (IOException e) { 
			logger.error("二級菜單的IO異常!", e);
			setResultMessage("二級菜單的IO異常");
			return ERROR;
		} 
		return null;
	}

html代碼：

<!-- 業務信息處理 problemTypeList -->
		<div id="business" style="background-color: #EFEEF5;">	
			<p style="border-bottom:1px solid #DDDDDD"><span style="font-size: 150%;margin: 30px">業務信息</span></p>
		<div class="inline-block pr15" style="width: 5%; clear: both;"></div>
			<div class="inline-block pr5 " style="width: 30%; margin-top: 10px;">
					投訴業務分類
					<select id="problemAttr" name="indictBusiness.problemAttr" onchange="btnSelect1()">  	 				    
					    <option value="">---沒有選擇---</option>
							#set($problemTypeList=$result.get("problemTypeList"))
							#if($problemTypeList && $problemTypeList.size()>0 )
							#foreach($que in $problemTypeList)
							<option value="$!que.encodeValue"
								#if($!indictInfo.problemAttr==$!que.encodeValue) selected #end>$!que.encodeDesc</option>
							#end #end
					</select>
			</div>
			
			<div class="inline-block pr5 " style="width: 30%; margin-top: 10px;">
					問題定位
					<select id="questionlocate" name="indictBusiness.questionlocate"  onclick="btnSelect2()">				    
					    <option value="">---沒有選擇---</option>
					</select>
			</div>
			
			<div class="inline-block pr5 " style="width: 30%; margin-top: 10px;">
					問題定責
					<select id="problemRespon" name="indictBusiness.problemRespon" >  	 				    
					    <option value="">---沒有選擇---</option>
					    #set($problemResponList=$result.get("problemResponList"))
							#if($problemResponList && $problemResponList.size()>0 )
							#foreach($problemRespon in $problemResponList)
							<option value="$!problemRespon.encodeValue"
								#if($!indictBusiness.problemRespon==$!problemRespon.encodeValue) selected #end>$!problemRespon.encodeDesc</option>
							#end #end
					</select>
			</div>
			
			<p style="border-bottom:1px solid #DDDDDD"><span style="font-size: 150%;margin: 30px">問題分類</span></p>
		<div class="inline-block pr15" style="width: 5%; clear: both;"></div>
			<div class="inline-block pr5 " style="width: 30%; margin-top: 10px;">
					一級分類
					<select id="typeone" name="indictBusiness.typeone" onclick="btnType1()" onchange="changeType1()">				    
					    <option value="">---沒有選擇---</option>
					</select>
			</div>
			<div class="inline-block pr5 " style="width: 30%; margin-top: 10px;">
					二級分類
					<select id="typetwo" name="indictBusiness.typetwo" onclick="btnType2()" onchange="changeType2()">				    
					    <option value="">---沒有選擇---</option>
					</select>
			</div>
			<div class="inline-block pr5 " style="width: 30%; margin-top: 10px;">
					三級分類
					<select id="typethree" name="indictBusiness.typethree" onclick="btnType3()">				    
					    <option value="">---沒有選擇---</option>
					</select>
			</div>
		</div>

js代碼：

//	投訴業務分類的onchange事件
	function btnSelect1(){
			var tempvalue = $("#problemAttr").val();
			var tempvalue2 = $("#problemAttr").val();
// 			alert(tempvalue);
			var type='';//定位
			var type2=''//分類1
			//對問題定位的改變
			if(tempvalue !=null && tempvalue != ""){
				$("#questionlocate option[value!='']").remove();
				$("#typeone option[value!='']").remove();
// 				$("#questionlocate")加載問題定位
				if(tempvalue=='01'){
					type='indict.question01';
				}else if(tempvalue=='02'){
					type='indict.question02';
				}else if(tempvalue=='03'){
					type='indict.question02';
				}else if(tempvalue=='04'){
					type='indict.question02';
				}else if(tempvalue=='05'){
					type='indict.question05';
				}else if(tempvalue=='06'){
					type='indict.question06';
				}else if(tempvalue=='07'){
					type='indict.question07';
				}else if(tempvalue=='08'){
					type='indict.question02';
				}
			//對一級分類的改變
				if(tempvalue=='01'){
					type2='indict.typeone01';
				}else if(tempvalue=='02'){
					type2='indict.typeone02';
				}else if(tempvalue=='03'){
					type2='indict.typeone02';
				}else if(tempvalue=='04'){
					type2='indict.typeone02';
				}else if(tempvalue=='05'){
					type2='indict.typeone03';
				}else if(tempvalue=='06'){
					type2='indict.typeone04';
				}else if(tempvalue=='07'){
					type2='indict.typeone05';
				}else if(tempvalue=='08'){
					type2='indict.typeone02';
				}
				
				//encodeDict.encodeType=type
				var jsonObj = {
					encodeType : type,
					encodeType2 : type2
				};
// 				alert(jsonObj.encodeType);
				jQuery.ajax({
					type:"POST",
					url:"indict!excuteAjax.do",
					dataType:'json',
					contentType: "application/x-www-form-urlencoded;charset=UTF-8",
					async:false,
					data: jsonObj,
					success: function(result) {
//						alert(result.data);
//						alert(result.msg);
						var list = result.data;
						var typeoneList = result.typeoneList;
						for (var i = 0; i < list.length; i++) {
// 							alert(list[i].encodeDesc);
// 							alert(list[i].encodeValue);
 							$("#questionlocate").append("<option value='"+list[i].encodeValue+"'>"+list[i].encodeDesc+"</option>");
						}
						for (var i = 0; i < typeoneList.length; i++) {
							$("#typeone").append("<option value='"+typeoneList[i].encodeValue+"'>"+typeoneList[i].encodeDesc+"</option>");
						}
					}
				}); 	
			}else{
				$("#questionlocate option[value!='']").remove();
				$("#typeone option[value!='']").remove();
				$("#typetwo option[value!='']").remove();
				$("#typethree option[value!='']").remove();
			}
			
		}
//		問題定位的onclick事件
	function btnSelect2(){
		var tempvalue = $("#problemAttr").val();
		if(tempvalue !=null && tempvalue != ""){
			
		}else{
			alert("請選擇投訴業務分類！");
		}
	}	
	//一級分類
	function btnType1(){
		var tempvalue = $("#problemAttr").val();
		if(tempvalue !=null && tempvalue != ""){
			
		}else{
			alert("請選擇投訴業務分類！");
		}
		
		
	}	
//	一級分類修改事件
	function changeType1(){
		var typeonevalue = $("#typeone").val().trim();
		if(typeonevalue != null && typeonevalue != ""){
		$("#typetwo option[value!='']").remove();
			var jsonObj = {
					"indictBusiness.twopartid" : typeonevalue
				};
			
			jQuery.ajax({
				type:"POST",
				url:"indict!listTypetwo.do",
				dataType:'json',
				contentType: "application/x-www-form-urlencoded;charset=UTF-8",
				async:false,
				data: jsonObj,
				success: function(result) {
					var typetwoList = result.typetwoList;
					for (var i = 0; i < typetwoList.length; i++) {
						$("#typetwo").append("<option value='"+typetwoList[i].twotypeid+"'>"+typetwoList[i].twotypevalue+"</option>");
					}
				}
			}); 
		}else{
			$("#typetwo option[value!='']").remove();
			$("#typethree option[value!='']").remove();
		}
	}
	//二級分類onclick事件
	function btnType2(){
		var typeonevalue = $("#typeone").val().trim();
		if(typeonevalue !=null && typeonevalue != ""){
			
		}else{
			alert("請選擇一級分類！");
		}
	}
	
	//二級分類onchange事件
	function changeType2(){
		var typetwovalue = $("#typetwo").val().trim();
		if(typetwovalue !=null && typetwovalue != ""){
			$("#typethree option[value!='']").remove();
			var jsonObj = {
					"indictBusiness.threepartid" : typetwovalue
				};
			
			jQuery.ajax({
				type:"POST",
				url:"indict!listTypethree.do",
				dataType:'json',
				contentType: "application/x-www-form-urlencoded;charset=UTF-8",
				async:false,
				data: jsonObj,
				success: function(result) {
					var typethreeList = result.typethreeList;
					for (var i = 0; i < typethreeList.length; i++) {
						$("#typethree").append("<option value='"+typethreeList[i].threetypeid+"'>"+typethreeList[i].threetypevalue+"</option>");
					}
				}
			}); 
		}else{
			$("#typethree option[value!='']").remove();
		}
	}
	
	function btnType3(){
		var typetwovalue = $("#typetwo").val().trim();
		if(typetwovalue !=null && typetwovalue != ""){
			
		}else{
			alert("請選擇二級分類！");
		}
	}