首先例如城市和地区之间的联动:
前台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.f2er.com/ajax/165599.html