您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

Java Web 實現動態級聯下拉選單（jQuery EasyUI 範例）

編輯：程式設計綜合問答

需求背景

在 Java Web 專案（Hibernate 註解開發）中，新增產品頁面需實現「分類 → 子分類 → 品牌」多級聯動下拉選單。

技術棧

後端：Java, Hibernate, Spring MVC / Struts2
前端：jQuery + jQuery EasyUI Combobox
資料格式：JSON

實作步驟

1. 後端提供級聯資料 API

@RestController
@RequestMapping("/api/category")
public class CategoryController {
    @Autowired CategoryService service;

    @GetMapping("/roots")
    public List<Category> roots() { return service.findRoots(); }

    @GetMapping("/children/{parentId}")
    public List<Category> children(@PathVariable Long parentId) {
        return service.findByParentId(parentId);
    }
}

2. 前端頁面引入 EasyUI

<link rel="stylesheet" href="easyui/themes/default/easyui.css">
<script src="jquery.min.js"></script>
<script src="easyui/jquery.easyui.min.js"></script>

3. 定義三個 Combobox

<input id="c1" class="easyui-combobox" 
       url="/api/category/roots" valueField="id" textField="name"
       panelHeight="auto">
<input id="c2" class="easyui-combobox" 
       valueField="id" textField="name" panelHeight="auto" disabled="true">
<input id="c3" class="easyui-combobox" 
       valueField="id" textField="name" panelHeight="auto" disabled="true">

4. 綁定級聯事件

$(function(){
    $('#c1').combobox({
        onSelect: function(rec){
            $('#c2').combobox('clear').combobox('enable');
            $('#c2').combobox('reload', '/api/category/children/' + rec.id);
            $('#c3').combobox('clear').combobox('disable');
        }
    });
    $('#c2').combobox({
        onSelect: function(rec){
            $('#c3').combobox('clear').combobox('enable');
            $('#c3').combobox('reload', '/api/category/children/' + rec.id);
        }
    });
});

進階優化

資料快取：若層級固定且資料量小，可一次載入全部 JSON，前端過濾，減少請求。
載入提示：使用 `onBeforeLoad` 顯示 Loading 圖示。
驗證：表單提交前檢查三級是否皆已選擇。

替代方案

若不使用 EasyUI，可採用原生 `