AJAX 實現二級聯動下拉框：根據一級分類動態加載二級數據

業務場景

頁面包含兩個 <select> 下拉框：「項目類別」（一級）與「選擇已有商戶/銀行」（二級）。用戶選擇「商戶」或「銀行」後，二級下拉框需通過 AJAX 向後端請求對應數據並動態渲染。

前端實現 (jQuery)

<select id="categoryLevelOne" name="unitPropertiesOneLevel">
    <option value="">請選擇</option>
    <option value="merchant">商戶</option>
    <option value="bank">銀行</option>
</select>

<select id="categoryLevelTwo" name="unitPropertiesTwoLevel">
    <option value="">請先選擇一級分類</option>
</select>

<script>
$(function() {
    $('#categoryLevelOne').on('change', function() {
        var type = $(this).val();
        var $levelTwo = $('#categoryLevelTwo');
        
        $levelTwo.empty().append('<option value="">加載中...</option>').prop('disabled', true);
        
        if (!type) {
            $levelTwo.empty().append('<option value="">請先選擇一級分類</option>');
            return;
        }
        
        $.ajax({
            url: '/api/getSubCategories', // 後端接口
            type: 'GET',
            data: { categoryType: type },
            dataType: 'json',
            success: function(data) {
                $levelTwo.empty().append('<option value="">請選擇</option>');
                $.each(data, function(i, item) {
                    $levelTwo.append('<option value="' + item.code + '">' + item.name + '</option>');
                });
                $levelTwo.prop('disabled', false);
            },
            error: function() {
                $levelTwo.empty().append('<option value="">加載失敗，請重試</option>');
            }
        });
    });
});
</script>

後端接口設計 (Spring MVC 範例)

@GetMapping("/api/getSubCategories")
@ResponseBody
public List<CategoryDTO> getSubCategories(@RequestParam String categoryType) {
    // 根據 categoryType 查詢數據庫
    // "merchant" -> 查商戶表
    // "bank" -> 查銀行表
    return categoryService.findByType(categoryType);
}

關鍵點總結

• 觸發時機： 一級下拉框的 change 事件。
• 參數傳遞： 將一級選中的值（如 merchant/bank）作為請求參數發送給後端。
• 狀態管理： 請求前禁用二級下拉框並顯示「加載中」，請求成功後填充數據並啟用，失敗時給予提示。
• 數據格式： 後端返回 JSON 陣列 [{code: '001', name: '商戶A'}, ...]，前端遍歷生成 <option>。
• 初始化： 頁面加載時二級下拉框應置為禁用或提示「請先選擇一級分類」。

進階優化

• 緩存： 一級分類數據量小且不常變，可前端緩存或後端 Redis 緩存。
• 防抖： 若一級下拉框選項極多，可考慮 debounce 減少請求頻率。
• 級聯多級： 同理可擴展至三級、四級聯動，遞歸應用相同模式。