Java 實現二級聯動下拉選單：數據庫一對多查詢與 Map 數據結構組裝

需求場景

前端兩個 `` 聯動：選擇一級分類 (父類)，二級分類 (子類) 動態加載對應數據。後端需從一對多關聯表中查詢並組裝數據結構返回前端。

數據庫表結構示例

-- 父類表
CREATE TABLE category_parent (
    id INT PRIMARY KEY,
    name VARCHAR(50)
);

-- 子類表
CREATE TABLE category_child (
    id INT PRIMARY KEY,
    parent_id INT,  -- 外鍵關聯父類
    name VARCHAR(50),
    FOREIGN KEY (parent_id) REFERENCES category_parent(id)
);

核心思路：一次查詢 + 內存組裝 Map>

1. 實體類

public class Parent {
    private Integer id;
    private String name;
    private List children; // 非數據庫字段，用於前端渲染
    // getter/setter
}

public class Child {
    private Integer id;
    private Integer parentId;
    private String name;
    // getter/setter
}

2. DAO 查詢 (單次 SQL 關聯查詢)

// MyBatis Mapper XML

SELECT p.id AS parent_id, p.name AS parent_name, c.id AS child_id, c.parent_id, c.name AS child_name FROM category_parent p LEFT JOIN category_child c ON p.id = c.parent_id ORDER BY p.id, c.id // 返回 List>，每行包含父子字段

3. Service 組裝邏輯 (關鍵步驟)

public Map> getChildMapByParentId() {
    List> rows = dao.selectAllWithChildren();
    
    // LinkedHashMap 保持父類順序
    Map> childMap = new LinkedHashMap<>();
    
    for (Map row : rows) {
        Integer parentId = (Integer) row.get("parent_id");
        // 父類可能無子類 (LEFT JOIN 導致 child_id 為 null)
        if (row.get("child_id") == null) {
            childMap.putIfAbsent(parentId, new ArrayList<>()); // 確保父類存在
            continue;
        }
        
        Child child = new Child();
        child.setId((Integer) row.get("child_id"));
        child.setParentId((Integer) row.get("parent_id"));
        child.setName((String) row.get("child_name"));
        
        // 核心：按 parentId 分組裝入 List
        childMap.computeIfAbsent(parentId, k -> new ArrayList<>()).add(child);
    }
    return childMap;
}

4. Controller 返回 JSON

@GetMapping("/categories")
public ResponseEntity> getCategories() {
    List parents = parentService.selectAll(); // 只查父類基本信息
    Map> childMap = categoryService.getChildMapByParentId();
    
    // 組裝樹形結構或分離返回 (前端易處理)
    Map result = new HashMap<>();
    result.put("parents", parents);
    result.put("childMap", childMap); // key=parentId, value=List
    return ResponseEntity.ok(result);
}

5. 前端 Vue/JS 渲染邏輯

// 1. 獲取數據
const { parents, childMap } = await api.getCategories();

// 2. 渲染一級下拉
parentSelect.innerHTML = parents.map(p => 
  `${p.name}`
).join('');

// 3. 一級 change 事件更新二級
parentSelect.addEventListener('change', (e) => {
    const parentId = Number(e.target.value);
    const children = childMap[parentId] || [];
    childSelect.innerHTML = children.map(c => 
      `${c.name}`
    ).join('');
    // 觸發二級 change 事件 (如有)
    childSelect.dispatchEvent(new Event('change'));
});

// 4. 初始化觸發一次
parentSelect.dispatchEvent(new Event('change'));

進階優化方案

總結

Java 實現二級聯動的核心是：**SQL 關聯查詢扁平化數據 → 內存中按 parentId 分組組裝 `Map>` → 前端按需篩選渲染**。此方案數據庫圓滾一次、內存組裝 O(n)、前端零延遲響應，適合中小數據量場景。大數據量轉為按需 AJAX 查詢。