Java 省市二級聯動下拉選單完整實作（Servlet + EasyUI + JSON）

前言

省市聯動是表單開發的經典需求。本文提供一個基於 Java Servlet、jQuery EasyUI、JSON 非同步載入的完整可執行範例，涵蓋後端資料提供、前端元件初始化、聯動邏輯與錯誤處理。

技術棧

• 後端：Java Servlet (Tomcat 8+)、json-lib (JSONObject/JSONArray)
• 前端：jQuery 1.8+、jQuery EasyUI 1.4+ (Combobox)
• 資料：記憶體模擬（易擴充至資料庫）

專案結構

src/
├── com.scce.servlet/LoadAreaServlet.java
├── com.scce.pojo/Prov.java, City.java
WebContent/
├── UI/ (EasyUI 相關 js/css)
└── test1.html

後端實作

1. 實體類別

package com.scce.pojo;

public class Prov {
    private int id;
    private String provinceName;
    // getter/setter 省略
}

public class City {
    private int id;
    private String cityName;
    // getter/setter 省略
}

2. 核心 Servlet：依參數決定回傳省份或城市

package com.scce.servlet;

import com.scce.pojo.City;
import com.scce.pojo.Prov;
import net.sf.json.JSONArray;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

public class LoadAreaServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
            throws ServletException, IOException {
        
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("application/json;charset=UTF-8");
        PrintWriter out = resp.getWriter();
        
        String provinceId = req.getParameter("provinceID");
        
        if (provinceId == null || provinceId.isEmpty()) {
            // 回傳省份列表
            ArrayList provs = new ArrayList<>();
            provs.add(new Prov(0, "湖北"));
            provs.add(new Prov(1, "湖南"));
            provs.add(new Prov(2, "廣東"));
            provs.add(new Prov(3, "廣西"));
            out.print(JSONArray.fromObject(provs).toString());
        } else {
            // 回傳該省份下的城市
            ArrayList cities = new ArrayList<>();
            switch (provinceId) {
                case "0": // 湖北
                    cities.add(new City(0, "武漢市"));
                    cities.add(new City(1, "黃石市"));
                    cities.add(new City(2, "十堰市"));
                    break;
                case "1": // 湖南
                    cities.add(new City(0, "長沙市"));
                    cities.add(new City(1, "岳陽市"));
                    cities.add(new City(2, "湘潭市"));
                    break;
                case "2": // 廣東
                    cities.add(new City(0, "廣州市"));
                    cities.add(new City(1, "深圳市"));
                    cities.add(new City(2, "珠海市"));
                    break;
                case "3": // 廣西
                    cities.add(new City(0, "南寧市"));
                    cities.add(new City(1, "柳州市"));
                    cities.add(new City(2, "桂林市"));
                    break;
            }
            out.print(JSONArray.fromObject(cities).toString());
        }
    }
    
    @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException { doPost(req, resp); }
}

3. web.xml 註冊

<servlet>
    <servlet-name>loadArea</servlet-name>
    <servlet-class>com.scce.servlet.LoadAreaServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>loadArea</servlet-name>
    <url-pattern>/LoadAreaServlet</url-pattern>
</servlet-mapping>

前端實作

完整 HTML (test1.html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>省市二級聯動演示</title>
    <link rel="stylesheet" href="UI/themes/default/easyui.css">
    <link rel="stylesheet" href="UI/themes/icon.css">
    <script src="UI/jquery.min.js"></script>
    <script src="UI/jquery.easyui.min.js"></script>
    <script src="UI/locale/easyui-lang-zh_TW.js"></script>
    <script>
        $(function() {
            // 1. 初始化省份下拉框
            $('#province').combobox({
                width: 200,
                valueField: 'id',
                textField: 'provinceName',
                editable: false,
                url: 'LoadAreaServlet',  // 無參數 → 取省份
                method: 'post',
                onLoadSuccess: function(data) {
                    if (data.length > 0) {
                        var firstId = data[0].id;
                        $(this).combobox('select', firstId); // 預選第一項
                        loadCities(firstId);                 // 載入對應城市
                    }
                },
                onSelect: function(rec) {
                    loadCities(rec.id); // 使用者切換省份時觸發
                }
            });
        });
        
        // 2. 載入城市下拉框
        function loadCities(provinceId) {
            $('#city').combobox({
                width: 200,
                valueField: 'id',
                textField: 'cityName',
                editable: false,
                url: 'LoadAreaServlet?provinceID=' + provinceId,
                method: 'post',
                onLoadSuccess: function(data) {
                    if (data.length > 0) {
                        $(this).combobox('select', data[0].id);
                    }
                }
            });
        }
    </script>
</head>
<body style="padding:20px;">
    <h3>省市二級聯動選單</h3>
    省份：<select id="province"><option>載入中...</option></select>
      
    城市：<select id="city"><option>請先選省份</option></select>
</body>
</html>

關鍵技術點解析

進階擴充方向

1. 三級聯動 (區/縣)：新增 District 實體、Servlet 增加 cityID 參數、前端串接第三個 Combobox
2. 資料庫驅動：Prov/City 表建立索引，DAO 層查詢替換記憶體列表
3. 快取優化：省份列表極少變動，可用 Redis/Guava Cache 緩存 JSON 字串
4. 搜尋/過濾：EasyUI Combobox 設定 filter: function(q, row) 支援模糊搜尋
5. 表單驗證：搭配 required: true, missingMessage: '請選擇城市'
6. RESTful 風格：改為 GET /api/provinces, GET /api/provinces/{id}/cities

常見問題排查

• 下拉框無資料：檢查 Network 面板 → Servlet 回傳 200 + 正確 JSON、URL 路徑正確 (含 ContextPath)
• 中文亂碼：確認 Servlet resp.setCharacterEncoding("UTF-8")、資料庫連線 URL 含 characterEncoding=utf8
• 級聯不觸發：onSelect 事件裡呼叫 loadCities 時傳遞 rec.id 而非 rec.provinceName
• EasyUI 衝突：確保 jQuery 只載入一次、版本相容 (EasyUI 1.4+ 需 jQuery 1.8+)