SSH 整合 jQuery 實現三級聯動下拉框完整實戰

業務場景

典型的三級地址選擇：小區 → 樓棟 → 房間。用戶選擇小區後動態加載樓棟，選擇樓棟後動態加載房間。本文基於 Struts2 + jQuery + JSON 插件實現完整鏈路。

前端頁面結構

<li id="floors">
    <span class="title">選擇小區：</span>
    <select name="village" id="village" onchange="loadBuildings()"></select>
</li>
<li id="builds">
    <span class="title">選擇樓棟：</span>
    <select name="build" id="build" onchange="loadRooms()"></select>
</li>
<li id="rooms">
    <span class="title">選擇房間：</span>
    <select name="room" id="room"></select>
</li>

jQuery 交互邏輯

// 加載樓棟
function loadBuildings() {
    var villageId = $("#village").val();
    $("#build").empty().append("<option value='0'>請選擇</option>");
    $("#room").empty().append("<option value='0'>請選擇</option>");
    
    if (villageId == 0) return;
    
    $.post("building.action", { parentId: villageId }, function(data) {
        $.each(data, function(i, item) {
            $("#build").append("<option value='" + item.id + "'>" + item.info + "</option>");
        });
    }, "json");
}

// 加載房間
function loadRooms() {
    var buildId = $("#build").val();
    $("#room").empty().append("<option value='0'>請選擇</option>");
    
    if (buildId == 0) return;
    
    $.post("room.action", { parentId: buildId }, function(data) {
        $.each(data, function(i, item) {
            $("#room").append("<option value='" + item.id + "'>" + item.info + "</option>");
        });
    }, "json");
}

// 頁面初始化加載小區
$(function() {
    $.post("village.action", function(data) {
        $.each(data, function(i, item) {
            $("#village").append("<option value='" + item.id + "'>" + item.info + "</option>");
        });
    }, "json");
});

Struts2 配置（struts.xml）

<package name="address" namespace="/" extends="json-default">
    <action name="village" class="addressAction" method="listVillages">
        <result type="json">
            <param name="root">villageList</param>
        </result>
    </action>
    
    <action name="building" class="addressAction" method="listBuildings">
        <result type="json">
            <param name="root">buildingList</param>
        </result>
    </action>
    
    <action name="room" class="addressAction" method="listRooms">
        <result type="json">
            <param name="root">roomList</param>
        </result>
    </action>
</package>

Action 處理類

public class AddressAction extends ActionSupport {
    private AddressService addressService;
    private Integer parentId;
    private List<AddressInfo> villageList, buildingList, roomList;
    
    // 獲取小區列表
    public String listVillages() {
        villageList = addressService.getVillages();
        return SUCCESS;
    }
    
    // 獲取樓棟列表
    public String listBuildings() {
        buildingList = addressService.getBuildings(parentId);
        return SUCCESS;
    }
    
    // 獲取房間列表
    public String listRooms() {
        roomList = addressService.getRooms(parentId);
        return SUCCESS;
    }
    
    // Getter/Setter 省略
}

關鍵依賴：Struts2 JSON 插件

<dependency>
    <groupId>org.apache.struts</groupId>
    <artifactId>struts2-json-plugin</artifactId>
    <version>2.5.30</version> <!-- 必須與 Struts2 核心版本一致 -->
</dependency>

版本兼容警告：JSON 插件版本 必須與項目中 Struts2 核心版本完全一致，否則會出現 NoSuchMethodError 或序列化異常。

進階優化建議

1. 緩存優化：小區列表變動極少，建議用 Redis/Guava 緩存，減少 DB 查詢
2. 防抖處理：onchange 事件添加 300ms 防抖，避免用戶快速切換觸發並發請求
3. 加載狀態：請求前顯示「加載中...」，請求失敗友好提示
4. 參數校驗：Action 入參 parentId 需校驗非空、合法性

總結

三級聯動核心鏈路：前端 onchange → jQuery AJAX → Struts2 Action → Service → DB → JSON 序列化 → 前端填充 Select。關鍵在於 Struts2 JSON 插件的正確配置與版本匹配，以及前端 Select 選項的動態清空與追加邏輯。掌握此模式，可輕鬆擴展至 N 級聯動場景。