ajax 实现多级联动

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

前台jq

[javascript]  view plain  copy

 print ?

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

页面 的下拉框写法：

[html]  view plain  copy

 print ?

1. <tr>  
2.                         <td height="37" class="fontright">地址：</td>  
3.                         <td class="fontleft2">  
4.                             <select name ="growthDmApplyInfo.dmOrgArea1" style="width:155px" id = "area1">  
5.                             <option value="">----请选择----</option>  
6.                             <#if growthDicAreaList1?exists>   
7.                                 <#list growthDicAreaList1 as list1>  
8.                                     <option  <#if '${list1.areaCode?if_exists}' == '${growthDmApplyInfo.dmOrgArea1?if_exists}'>  selected  </#if> value="${list1.areaCode?if_exists}">${list1.areaName?if_exists}</option>  
9.                                       
10.                                 </#list>  
11.                             </#if>  
12.                             </select>  
13.                             <select name = "growthDmApplyInfo.dmOrgArea2" style="width:155px" align="center">  
14.                             <option value="">----请选择----</option>   
15.                             <#if growthDicAreaList2?exists>  
16.                                 <#list growthDicAreaList2 as list2>  
17.                                 <option  <#if '${list2.areaCode?if_exists}' == '${growthDmApplyInfo.dmOrgArea2?if_exists}'>  selected  </#if> value="${list2.areaCode?if_exists}">${list2.areaName?if_exists}</option>  
18.                                   
19.                                 </#list>  
20.                             </#if>  
21.                             </select style="width:155px">  
22.                             具体地址：  
23.                             <input type="text"  name = "growthDmApplyInfo.dmOrgAddress" value ="${growthDmApplyInfo.dmOrgAddress?if_exists}" style="width:300px"/>  
24.                         </td>  
25.                            
26.                     </tr>  

后台写法：

关键代码：

[java]  view plain  copy

 print ?

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