您的位置:首页 > 其它

ajax 实现多级联动。

2013-11-15 10:13 363 查看
首先例如城市和地区之间的联动:

前台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;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: