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

在工作需求中常常需要实现下拉框级联联动,如在最近开发的系统中需要内容提供商与内容提供商的应用做级联。创建文件cpRelevanceApp.jsp文件,具体代码如下： <%@pagelanguage="

在工作需求中常常需要实现下拉框级联联动,如在最近开发的系统中需要内容提供商与内容提供商的应用做级联。创建文件cpRelevanceApp.jsp文件,具体代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="s" uri="/struts-tags"%><%@ taglib prefix="c" uri="/WEB-INF/tld/c.tld"%><%@ taglib prefix="lz" uri="http://www.lazy3q.com/web/lazy3q.tld"%><%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%><%@ taglib prefix="fmt" uri="/WEB-INF/tld/fmt.tld"%><div class="searchCondition formRow">    <label>CPID：</label>    <select id="cpId" name="cpId" cpId="${cpId}" data-placeholder="CPID" class="select" tabindex="2" style="width:167px;">        <option value=''>--全部--</option>        <c:forEach var="item" items="${cpList}" varStatus="i">            <option value="${item.id}" <c:if test="${item.id == cpId}">selected</c:if>>${item.shortName}</option>        </c:forEach>    </select></div><div class="searchCondition formRow">    <label>APPID：</label>    <select id="appId" name="appId" appId="${appId}" data-placeholder="APPID" class="select" tabindex="3" style="width:167px;">        <option value=''>--全部--</option>    </select></div><script>    $(document).ready(function() {        $("#cpId").change(function() {            var cpId = $(this).children('option:selected').val();            if (cpId != '') {                selectApp(cpId);            } else {                $("#appId").html("<option value=''>--全部--</option>");                $.chosenUpd("#appId");            }        })        var cpId = $("#cpId").children('option:selected').val();        if (cpId != '') {            selectApp(cpId);        }    });        function selectApp(cpId) {        $.ajax({            type : "get",            url : "/classification/census/cp_jqueryApp.do",            cache : false,            data : {                cpId : cpId            },            success : function(resp) {                var h = '<option value="">--全部--</option>';                if (resp != null) {                    for ( var i = 0; i < resp.length; i++) {                        if (resp[i].appId == $("#appId").attr("appId")) {                            h += '<option value="' + resp[i].appId + '" selected>' + resp[i].appName + '</option>';                        } else {                            h += '<option value="' + resp[i].appId + '" >' + resp[i].appName + '</option>';                        }                    }                }                $("#appId").html(h);                $.chosenUpd("#appId");            }        });    }</script>

  在JSP页面添加,

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

。

在ACTION层,添加如下代码:

public void jqueryApp(){        Map<String, Object> condition = new HashMap<String, Object>();        condition.put("cpId", $.GetRequest("cpId"));        List<TblAppInfo> appList = tblAppInfoService.getList(condition);        try {            echoJson(ServletActionContext.getResponse(), JSON.toJSONString(appList));        } catch (IOException e) {            e.printStackTrace();        }    }