JDBC + Servlet + jQuery 實現商城分類分級新增：三級聯動思路

資料模型

CREATE TABLE category (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100) NOT NULL,
    parent_id INT DEFAULT 0,        -- 0 代表頂級
    level TINYINT NOT NULL,         -- 1/2/3
    sort INT DEFAULT 0,
    FOREIGN KEY (parent_id) REFERENCES category(id)
);

後端介面設計

• `GET /api/categories?parentId=0` → 返回頂級分類 (一級)。
• `GET /api/categories?parentId=5` → 返回父 ID=5 的子分類 (二級/三級)。
• `POST /api/categories` { name, parentId } → 新增分類，自動計算 `level = parent.level + 1`，驗證 `level <= 3`。

前端 jQuery 三級聯動骨架

<select id="level1"><option value="0">請選擇一級</option></select>
<select id="level2" style="display:none"><option value="0">請選擇二級</option></select>
<select id="level3" style="display:none"><option value="0">請選擇三級</option></select>
<button id="btnAdd">新增子分類</button>

<script>
function loadChildren(parentId, $targetSelect, nextSelectId) {
    $.get('/api/categories', { parentId }, function(list) {
        $targetSelect.empty().append('請選擇');
        list.forEach(c => $targetSelect.append(`${c.name}`));
        $targetSelect.show();
        $(`#${nextSelectId}`).hide().empty().append('請選擇');
    });
}

$('#level1').change(function() {
    var pid = $(this).val();
    if (pid != '0') loadChildren(pid, $('#level2'), 'level3');
    else { $('#level2, #level3').hide(); }
});
$('#level2').change(function() {
    var pid = $(this).val();
    if (pid != '0') loadChildren(pid, $('#level3'), '');
    else $('#level3').hide();
});

$('#btnAdd').click(function() {
    var pid = $('#level3').val() || $('#level2').val() || $('#level1').val();
    if (pid == '0') return alert('請選擇父分類');
    var name = prompt('輸入新分類名稱:');
    if (!name) return;
    $.post('/api/categories', { name, parentId: pid }, function(res) {
        if (res.success) {
            alert('新增成功');
            // 刷新對應下拉框
            $(`#level${res.data.level}`).trigger('change');
        } else alert(res.msg);
    });
});
</script>

關鍵邏輯

1. **遞歸/疊代查詢子節點**：資料庫遞歸 CTE 或應用層疊代均可，分類層級固定 (3級) 簡單高效。
2. **前端級聯**：選擇父級 → 載入子級 → 隱藏更深層級，避免殘留錯誤資料。
3. **新增時自動推導層級**：`level = (parentId==0 ? 1 : parent.level+1)`，後端強制校驗 `level <= 3`。

參考「省市區三級聯動」成熟模式，分類管理本質相同，切勿重造輪子。