使用Ajax实现下拉框级联联动

前端之家收集整理的这篇文章主要介绍了使用Ajax实现下拉框级联联动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在工作需求中常常需要实现下拉框级联联动,如在最近开发的系统中需要内容提供商与内容提供商的应用做级联。创建文件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>

在JSP页面添加,

<%@includefile="/WEB-INF/jsp/fragmentary/cpRelevanceApp.jsp"%>

在ACTION层,添加如下代码:

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();
}
}

猜你在找的Ajax相关文章