提交并返回同一URL（JavaScript）：JSP中获取下拉框值的最简提交方法求助

我给你两种最简的实现方式，优先推荐第一种，几乎不用额外代码，完全贴合你的需求：

方式一：原生表单提交（最简，无额外JS） #

这种方式直接利用表单提交把选中值传给当前JSP，服务端拿到参数后直接在第二个SQL里使用，代码量最少：

<!-- 用表单包裹下拉框，提交到当前JSP -->
<form method="get" action="">
    <select name="assettypeid" id="assettypeid" onchange="this.form.submit();">
        <sql:query var="queryresults" dataSource="jdbc/database">
            SELECT id, name FROM assettype
        </sql:query>
        <option value="">-- Please Select --</option>
        <!-- 补全下拉框选项的循环渲染，同时回显选中状态 -->
        <c:forEach var="type" items="${queryresults.rows}">
            <option value="${type.id}" ${param.assettypeid == type.id ? 'selected' : ''}>${type.name}</option>
        </c:forEach>
    </select>
</form>

<!-- 第二个SQL查询：仅当选中有效类型时执行 -->
<c:if test="${not empty param.assettypeid}">
    <sql:query var="relatedAssets" dataSource="jdbc/database">
        SELECT * FROM assets WHERE asset_type_id = ?
        <!-- 用sql:param防止SQL注入，这一步一定要做！ -->
        <sql:param value="${param.assettypeid}" />
    </sql:query>

    <!-- 展示查询结果 -->
    <h3>关联资产列表</h3>
    <ul>
        <c:forEach var="asset" items="${relatedAssets.rows}">
            <li>${asset.name}</li>
        </c:forEach>
    </ul>
</c:if>

为什么这是最简？ #

• 不用单独写JS函数，直接在onchange里调用this.form.submit()提交表单
• 自动回显选中的下拉选项，用户体验友好
• 用<sql:param>避免SQL注入，安全可靠

方式二：AJAX异步刷新（无页面重载） #

如果不想刷新整个页面，用原生JS写个简单的AJAX也很简洁，适合需要局部更新的场景：

<select name="assettypeid" id="assettypeid" onchange="typechanged();">
    <sql:query var="queryresults" dataSource="jdbc/database">
        SELECT id, name FROM assettype
    </sql:query>
    <option value="">-- Please Select --</option>
    <c:forEach var="type" items="${queryresults.rows}">
        <option value="${type.id}">${type.name}</option>
    </c:forEach>
</select>

<!-- 用来展示查询结果的容器 -->
<div id="assetsResult"></div>

<script>
function typechanged() {
    const typeId = document.getElementById('assettypeid').value;
    const resultContainer = document.getElementById('assetsResult');

    // 选中空值时清空结果
    if (!typeId) {
        resultContainer.innerHTML = '';
        return;
    }

    // 发起AJAX请求到当前JSP，携带选中的ID
    const xhr = new XMLHttpRequest();
    xhr.open('GET', `?assettypeid=${typeId}`, true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            // 把返回的结果HTML插入容器
            resultContainer.innerHTML = xhr.responseText;
        }
    };
    xhr.send();
}
</script>

<!-- 仅当有assettypeid参数时，输出查询结果的HTML -->
<% if (request.getParameter("assettypeid") != null) { %>
    <sql:query var="relatedAssets" dataSource="jdbc/database">
        SELECT * FROM assets WHERE asset_type_id = ?
        <sql:param value="${param.assettypeid}" />
    </sql:query>

    <h3>关联资产列表</h3>
    <ul>
        <c:forEach var="asset" items="${relatedAssets.rows}">
            <li>${asset.name}</li>
        </c:forEach>
    </ul>
<% } %>

注意事项 #

• 不管用哪种方式，一定要用<sql:param>传递参数，绝对不能直接把${param.assettypeid}拼进SQL语句里，否则会有严重的SQL注入风险。
• 如果你的JSP里已经有其他表单内容，直接把下拉框加到现有表单里就行，不用单独新建表单。

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