三級聯動下拉菜單第三級改為可輸入文本框的實現思路與避坑指南

需求澄清

用戶期望：幣種（一級） → 存期（二級） → 年利率（三級，文本框可輸入）。但實際上「幣種+存期」決定年利率，屬於二級聯動 + 手工輸入，非標準三級聯動（三級通常也是下拉選擇）。

實現架構

前端                          後端
┌─────────────┐     AJAX      ┌─────────────┐
│ 幣種下拉    │ ───────────▶  │ GET /terms? │
│ 存期下拉    │ ◀───────────  │ currency=CNY│
│ 年利率輸入框│  (可選驗證)   │ 返回存期列表 │
└─────────────┘               └─────────────┘

關鍵步驟

1. 幣種變更事件：觸發 AJAX 請求後端 /api/terms?currency=XXX，獲取該幣種對應的存期列表。
2. 動態填充存期下拉：清空原選項，追加新 <option>，若列表為空則禁用存期下拉。
3. 年利率文本框：
   • 默認只讀/置灰，提示「請選擇幣種與存期」。
   • 存期選定後，可：
     a) 前端直接計算（若利率規則固定，如查表 JSON）；
     b) 再次 AJAX 獲取利率，自動填入並保持可編輯（用戶可微調）。
   • 表單提交時，後端必須再次校驗利率合法性（防篡改）。

數據庫設計建議

CREATE TABLE deposit_rate (
    id BIGINT PRIMARY KEY,
    currency CHAR(3) NOT NULL,      -- 幣種
    term_months INT NOT NULL,       -- 存期(月)
    annual_rate DECIMAL(5,4) NOT NULL, -- 年利率
    UNIQUE KEY uk_currency_term (currency, term_months)
);

前端代碼骨架

$('#currency').change(function() {
    const currency = $(this).val();
    $('#term').prop('disabled', true).empty().append('請選擇存期');
    $('#rate').val('').prop('readonly', true);

    if (!currency) return;

    $.getJSON('/api/terms', {currency}, function(terms) {
        terms.forEach(t => $('#term').append(`${t.termMonths}個月`));
        $('#term').prop('disabled', false);
    });
});

$('#term').change(function() {
    const term = $(this).val();
    if (!term) return;
    // 方案A：前端查表
    const rate = RATE_TABLE[$('#currency').val()][term];
    $('#rate').val(rate).prop('readonly', false);
    // 方案B：後端查詢
    // $.getJSON('/api/rate', {currency: $('#currency').val(), term}, function(r) { $('#rate').val(r.rate).prop('readonly', false); });
});

常見坑點

• 級聯概念混淆：第三級若為輸入框，不再是「聯動選擇」，切勿強行套三級聯動組件。
• 並發請求競態：幣種快速切換時，後發請求可能先返回，導致存期列表錯誤 → 使用 axios 取消舊請求或標記 requestId 校驗。
• 浮點數精度：利率計算用 BigDecimal（後端）或 decimal.js（前端），避免 0.015 * 10000 = 150.0000000002 類問題。

核心思想：**聯動只負責「選項篩選」，輸入框負責「數值錄入/修正」，職責分離，前後端雙重校驗**。