如何在JSP中将第一个select的查询值传入第二个select的SQL查询

服务器端同步实现（表单提交刷新） #

这种方式通过表单提交刷新页面，实现第二个Select根据第一个的选中值加载数据，适合简单场景：

<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!-- 数据库连接配置，请替换为实际信息 -->
<sql:setDataSource var="dbConn" driver="com.mysql.cj.jdbc.Driver"
                   url="jdbc:mysql://localhost:3306/your_database"
                   user="your_username" password="your_password"/>

<form method="post" action="${pageContext.request.contextPath}/currentPage.jsp">
    <!-- 第一个Select：绑定权限类型查询结果 -->
    <label>权限类型：</label>
    <select name="selectedPrivId" onchange="this.form.submit()">
        <option value="">请选择</option>
        <sql:query var="priv_query" dataSource="${dbConn}">
            SELECT priv_id from en_privilegetypes where actual = 1
        </sql:query>
        <c:forEach var="priv" items="${priv_query.rows}">
            <option value="${priv.priv_id}" 
                    <c:if test="${param.selectedPrivId == priv.priv_id}">selected</c:if>>
                ${priv.priv_id}
            </option>
        </c:forEach>
    </select>

    <!-- 第二个Select：根据选中的权限ID加载关联项目 -->
    <label>关联项目：</label>
    <select name="selectedItem">
        <option value="">请先选择权限类型</option>
        <c:if test="${not empty param.selectedPrivId}">
            <sql:query var="itemquery" dataSource="${dbConn}">
                SELECT ItemName from en_items where actual = ?
                <sql:param value="${param.selectedPrivId}"/>
            </sql:query>
            <c:forEach var="item" items="${itemquery.rows}">
                <option value="${item.ItemName}">${item.ItemName}</option>
            </c:forEach>
        </c:if>
    </select>
</form>

关键注意点：

• 必须使用<sql:param>传递参数，避免SQL注入风险，绝对不能直接将参数拼接到SQL语句中。
• 第一个Select的onchange事件触发表单提交，页面刷新后会保留选中状态并加载对应项目数据。

客户端AJAX异步实现（无刷新联动） #

这种方式无需刷新页面，用户体验更流畅，适合对交互要求较高的场景：

主页面代码 #

<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!-- 数据库连接配置，请替换为实际信息 -->
<sql:setDataSource var="dbConn" driver="com.mysql.cj.jdbc.Driver"
                   url="jdbc:mysql://localhost:3306/your_database"
                   user="your_username" password="your_password"/>

<label>权限类型：</label>
<select id="privSelect">
    <option value="">请选择</option>
    <sql:query var="priv_query" dataSource="${dbConn}">
        SELECT priv_id from en_privilegetypes where actual = 1
    </sql:query>
    <c:forEach var="priv" items="${priv_query.rows}">
        <option value="${priv.priv_id}">${priv.priv_id}</option>
    </c:forEach>
</select>

<label>关联项目：</label>
<select id="itemSelect">
    <option value="">请先选择权限类型</option>
</select>

<script>
// 监听第一个Select的选择变化
document.getElementById('privSelect').addEventListener('change', function() {
    const selectedPrivId = this.value;
    const itemSelect = document.getElementById('itemSelect');

    // 清空并显示加载状态
    itemSelect.innerHTML = '<option value="">加载中...</option>';

    if (!selectedPrivId) {
        itemSelect.innerHTML = '<option value="">请先选择权限类型</option>';
        return;
    }

    // 发送AJAX请求获取项目数据
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '${pageContext.request.contextPath}/loadItems.jsp?privId=' + selectedPrivId, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 替换第二个Select的选项
            itemSelect.innerHTML = xhr.responseText;
        }
    };
    xhr.send();
});
</script>

后台请求处理页面（loadItems.jsp） #

<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!-- 数据库连接配置，请替换为实际信息 -->
<sql:setDataSource var="dbConn" driver="com.mysql.cj.jdbc.Driver"
                   url="jdbc:mysql://localhost:3306/your_database"
                   user="your_username" password="your_password"/>

<c:if test="${not empty param.privId}">
    <sql:query var="itemquery" dataSource="${dbConn}">
        SELECT ItemName from en_items where actual = ?
        <sql:param value="${param.privId}"/>
    </sql:query>
    <option value="">请选择项目</option>
    <c:forEach var="item" items="${itemquery.rows}">
        <option value="${item.ItemName}">${item.ItemName}</option>
    </c:forEach>
</c:if>

关键注意点：

• 异步请求通过XMLHttpRequest发送选中的权限ID，后台返回拼接好的<option>标签，前端直接渲染。
• 同样使用<sql:param>防止SQL注入，保证代码安全性。

内容的提问来源于stack exchange，提问作者damnetime