ajax 实现多级联动

首先例如城市和地区之间的联动：

前台jq

$("#area1").change(function(){//市变化的时候 调用后台查询相关的地区
		$.ajax({
	      	 	url:'${base}/qiye/direcapply!getArea2.action',//后台获取地区的方法action
	      		type:'post',dataType:'json',//以json的形式返回，比较容易解析
	      	 	data:'code='+$("select[name='growthDmApplyInfo.dmOrgArea1']").val(),//传的参数，就是市的code 后台根据市的code去查询地区
	       		error: function(){
	       				alert('error');
	       		},success:function(arr){//arr是后台返回的一个地区的list
	       			$("select[name='growthDmApplyInfo.dmOrgArea2']").empty();// jq写法  清楚地区下拉框的所有内容，然后拼接上从后台取出来的数据
					$("<option value=''>---请选择---</option>").appendTo("select[name='growthDmApplyInfo.dmOrgArea2']");
					for(var i=0;i<arr.length;i++){//获取arr里面的数据，拼接到select上
						$("select[name='growthDmApplyInfo.dmOrgArea2']").append("<option value='"+arr[i].areaCode+"'>"+arr[i].areaName+"</option>");
					}
	       				/*var htmlText = ""; //js写法
	       				for(var i=0;i<area2list.length ;i++){
	       						htmlText =htmlText+ "<option value='" +area2list[i].areaCode + "'>" + area2list[i].areaName + "</option>"
	       				}
	        			$("select[name='growthDmApplyInfo.dmOrgArea2']").html(htmlText);*/
	           	}
	                  
	     });
	})

页面 的下拉框写法：

<tr>
        				<td height="37" class="fontright">地址：</td>
        				<td class="fontleft2">
        					<select name ="growthDmApplyInfo.dmOrgArea1" style="width:155px" id = "area1">
        					<option value="">----请选择----</option>
        					<#if growthDicAreaList1?exists> 
	        					<#list growthDicAreaList1 as list1>
	        						<option  <#if '${list1.areaCode?if_exists}' == '${growthDmApplyInfo.dmOrgArea1?if_exists}'>  selected  </#if> value="${list1.areaCode?if_exists}">${list1.areaName?if_exists}</option>
	        						
	        				    </#list>
        				    </#if>
        					</select>
        					<select name = "growthDmApplyInfo.dmOrgArea2" style="width:155px" align="center">
        					<option value="">----请选择----</option> 
        					<#if growthDicAreaList2?exists>
        						<#list growthDicAreaList2 as list2>
        						<option  <#if '${list2.areaCode?if_exists}' == '${growthDmApplyInfo.dmOrgArea2?if_exists}'>  selected  </#if> value="${list2.areaCode?if_exists}">${list2.areaName?if_exists}</option>
        						
        				    	</#list>
        				    </#if>
        					</select style="width:155px">
        					具体地址：
        					<input type="text"  name = "growthDmApplyInfo.dmOrgAddress" value ="${growthDmApplyInfo.dmOrgAddress?if_exists}" style="width:300px"/>
        				</td>
        				 
      				</tr>

后台写法：

关键代码：

public String getArea2() throws IOException{
		growthDicAreaList2 = direcApplyService.growthDicArea("3",code);
		JSONObject jsonObject = new JSONObject();
		jsonObject.put("json",growthDicAreaList2);
		String jsonString  =jsonObject.getString("json");
		HttpServletResponse response = (HttpServletResponse)ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE); 
		response.setHeader("content-type","text/html;charset=utf-8");
		response.getWriter().println(jsonString); //这里是地区的一个list的json格式的数据  与前台jq相对应
		return null;
	}

原文地址：https://www.jb51.cc/ajax/165599.html