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

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/dengjianming/blog/406754