在工作需求中常常需要实现下拉框级联联动,如在最近开发的系统中需要内容提供商与内容提供商的应用做级联。创建文件cpRelevanceApp.jsp文件,具体代码如下:
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%> <%@taglibprefix="s"uri="/struts-tags"%> <%@taglibprefix="c"uri="/WEB-INF/tld/c.tld"%> <%@taglibprefix="lz"uri="http://www.lazy3q.com/web/lazy3q.tld"%> <%@taglibprefix="fn"uri="http://java.sun.com/jsp/jstl/functions"%> <%@taglibprefix="fmt"uri="/WEB-INF/tld/fmt.tld"%> <divclass="searchConditionformRow"> <label>CPID:</label> <selectid="cpId"name="cpId"cpId="${cpId}"data-placeholder="CPID"class="select"tabindex="2"style="width:167px;"> <optionvalue=''>--全部--</option> <c:forEachvar="item"items="${cpList}"varStatus="i"> <optionvalue="${item.id}"<c:iftest="${item.id==cpId}">selected</c:if>>${item.shortName}</option> </c:forEach> </select> </div> <divclass="searchConditionformRow"> <label>APPID:</label> <selectid="appId"name="appId"appId="${appId}"data-placeholder="APPID"class="select"tabindex="3"style="width:167px;"> <optionvalue=''>--全部--</option> </select> </div> <script> $(document).ready(function(){ $("#cpId").change(function(){ varcpId=$(this).children('option:selected').val(); if(cpId!=''){ selectApp(cpId); }else{ $("#appId").html("<optionvalue=''>--全部--</option>"); $.chosenUpd("#appId"); } }) varcpId=$("#cpId").children('option:selected').val(); if(cpId!=''){ selectApp(cpId); } }); functionselectApp(cpId){ $.ajax({ type:"get",url:"/classification/census/cp_jqueryApp.do",cache:false,data:{ cpId:cpId },success:function(resp){ varh='<optionvalue="">--全部--</option>'; if(resp!=null){ for(vari=0;i<resp.length;i++){ if(resp[i].appId==$("#appId").attr("appId")){ h+='<optionvalue="'+resp[i].appId+'"selected>'+resp[i].appName+'</option>'; }else{ h+='<optionvalue="'+resp[i].appId+'">'+resp[i].appName+'</option>'; } } } $("#appId").html(h); $.chosenUpd("#appId"); } }); } </script>
<%@includefile="/WEB-INF/jsp/fragmentary/cpRelevanceApp.jsp"%>
。
publicvoidjqueryApp(){ Map<String,Object>condition=newHashMap<String,Object>(); condition.put("cpId",$.GetRequest("cpId")); List<TblAppInfo>appList=tblAppInfoService.getList(condition); try{ echoJson(ServletActionContext.getResponse(),JSON.toJSONString(appList)); }catch(IOExceptione){ e.printStackTrace(); } }