jQuery 實現二級聯動下拉選單 + 第三級輸入框自動帶入：幣種/存期/利率聯動範例

需求模型

• 第一級：幣種
• 第二級：存期 (依幣種篩選)
• 第三級：年利率 (依存期帶入，可編輯輸入框)

完整可執行範例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
  幣種：<select id="currency"><option value="">請選擇</option></select>
  存期：<select id="term"><option value="">請選擇</option></select>
  年利率：<input type="text" id="rate" readonly>
  
  <script>
  $(function() {
    // 模擬後端資料結構
    var data = {
      "USD": [
        {term: "1M", rate: "0.5%"},
        {term: "3M", rate: "1.2%"},
        {term: "1Y", rate: "2.0%"}
      ],
      "CNY": [
        {term: "1M", rate: "1.5%"},
        {term: "3M", rate: "2.1%"},
        {term: "1Y", rate: "3.0%"}
      ]
    };
    
    // 1. 初始化幣種
    $.each(data, function(currency) {
      $('#currency').append('<option value="' + currency + '">' + currency + '</option>');
    });
    
    // 2. 幣種變更 → 更新存期
    $('#currency').change(function() {
      var curr = $(this).val();
      var $term = $('#term').empty().append('<option value="">請選擇</option>');
      $('#rate').val(''); // 清空利率
      
      if (curr && data[curr]) {
        $.each(data[curr], function(i, item) {
          $term.append('<option value="' + item.term + '" data-rate="' + item.rate + '">' + item.term + '</option>');
        });
      }
    });
    
    // 3. 存期變更 → 帶入利率
    $('#term').change(function() {
      var rate = $(this).find('option:selected').data('rate');
      $('#rate').val(rate || '');
    });
  });
  </script>
</body>
</html>

關鍵技術點

1. data-* 屬性：`` 將利率儲存在選項上，避免額外 AJAX 或陣列查找。
2. 鏈式呼叫：`.empty().append()` 流暢操作 DOM。
3. 級聯清空：父級變更時重置子級與孫級狀態。
4. readonly vs disabled：利率用 readonly 仍可隨表單提交；disabled 不會提交。

進階：資料來自後端 API

$('#currency').change(function() {
  $.getJSON('/api/terms?currency=' + $(this).val(), function(list) {
    var $term = $('#term').empty().append('<option>請選擇</option>');
    $.each(list, function(i, item) {
      $term.append($('<option>').val(item.term).text(item.term).data('rate', item.rate));
    });
  });
});