ajax 实现多级联动。

左手的ㄟ右手 2022-09-18 09:56 175阅读 0赞

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

前台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;
    	}