JSP + JavaScript 實作二級聯動下拉選單（資料庫驅動）

資料庫設計

完整 JSP 實作

<%@ page contentType="text/html; charset=GB2312" %>
<%@ taglib uri="https://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%@ taglib uri="https://java.sun.com/jsp/jstl/core" prefix="c" %>
<% request.setCharacterEncoding("gb2312"); %>
<html><head>
    <title>二級聯動選單</title>
</head><body>

<!-- 1. 讀取所有二級分類存入 JS 陣列 --%>
<sql:query var="subRs" dataSource="${dataSource}">
    SELECT NclassId, NclassName, parentId FROM Nclass ORDER BY NclassId
</sql:query>
<script type="text/javascript">
    var subcat = new Array();
    <c:forEach var="row" items="${subRs.rows}" varStatus="status">
        subcat[<%=status.index%>] = ['${row.NclassName}', '${row.NclassId}', '${row.parentId}'];
    </c:forEach>
    var onecount = subcat.length;

    function changelocation(locationid) {
        var sel = document.myform.NclassId;
        sel.length = 0; // 清空
        for (var i=0; i<onecount; i++) {
            if (subcat[i][2] == locationid) {
                sel.options[sel.length] = new Option(subcat[i][0], subcat[i][1]);
            }
        }
    }
</script>

<form name="myform" method="POST" action="adminsave.jsp?action=add">
    <table>
    <tr>
        <td>一級分類</td>
        <td>
            <select name="classId" onchange="changelocation(this.value)">
                <option value="">==請選一級分類==</option>
                <sql:query var="mainRs" dataSource="${dataSource}">
                    SELECT classId, className FROM class
                </sql:query>
                <c:forEach var="row" items="${mainRs.rows}">
                    <option value="${row.classId}">${row.className}</option>
                </c:forEach>
            </select>
        </td>
        <td>二級分類</td>
        <td>
            <select name="NclassId">
                <option value="">==請選二級分類==</option>
            </select>
        </td>
    </tr>
    </table>
</form>
</body></html>

關鍵技術點

• JSTL SQL 標籤：<sql:query> 直接查詢，<c:forEach> 迭代輸出 JS 陣列與 Option。
• JS 聯動邏輯：一級 onchange 觸發 changelocation，依 parentId 篩選二級選項。
• 資料來源：需在 context.xml 或 web.xml 設定 DataSource，JSP 中透過 ${dataSource} 引用。

改進建議

• 採用 AJAX 非同步載入二級選項，避免一次輸出大量 JS 陣列。
• 將資料庫邏輯移至 Service/DAO 層，JSP 僅負責渲染。
• 若資料量大，考慮快取一級分類與二級分類映射關係。