HTML 雙層級聯下拉選單：第一層選表名，第二層動態載入欄位名

需求分析

• 第一個 ``：選擇資料庫表名。
  第二個 `
  `：根據第一個選擇，動態載入該表的欄位名稱。
• 最終將「表名 + 欄位名」提交至下一頁處理。

前端實作（原生 JS + Fetch）

<select id="tableSelect">
  <option value="">-- 請選擇資料表 --</option>
</select>

<select id="columnSelect" disabled>
  <option value="">-- 請先選資料表 --</option>
</select>

<button id="submitBtn" disabled>送出</button>

<script>
const tableSel = document.getElementById('tableSelect');
const colSel = document.getElementById('columnSelect');
const btn = document.getElementById('submitBtn');

// 1. 頁面載入時取得所有表名
fetch('/api/tables')
  .then(r => r.json())
  .then(tables => {
    tables.forEach(t => tableSel.add(new Option(t, t)));
  });

// 2. 表名變更 → 載入欄位
tableSel.addEventListener('change', () => {
  const table = tableSel.value;
  colSel.innerHTML = '載入中...';
  colSel.disabled = true;
  btn.disabled = true;

  if (!table) return;

  fetch(`/api/tables/${encodeURIComponent(table)}/columns`)
    .then(r => r.json())
    .then(cols => {
      colSel.innerHTML = '-- 請選擇欄位 --';
      cols.forEach(c => colSel.add(new Option(c, c)));
      colSel.disabled = false;
    });
});

// 3. 欄位選擇後啟用送出
colSel.addEventListener('change', () => {
  btn.disabled = !colSel.value;
});

// 4. 送出 → 帶參數跳轉
btn.addEventListener('click', () => {
  const params = new URLSearchParams({
    table: tableSel.value,
    column: colSel.value
  });
  location.href = `/next-page?${params.toString()}`;
});
</script>

後端 API 設計建議（語言無關）

資料庫查詢欄位名的通用 SQL

• MySQL: `SHOW COLUMNS FROM \`table_name\`` 或 `SELECT COLUMN_NAME FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME='table_name' AND TABLE_SCHEMA=DATABASE()`
• PostgreSQL: `SELECT column_name FROM information_schema.columns WHERE table_name='table_name'`
• SQL Server: `SELECT COLUMN_NAME FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME='table_name'`
• Oracle: `SELECT COLUMN_NAME FROM USER_TAB_COLUMNS WHERE TABLE_NAME='TABLE_NAME'`

安全性提醒

• **嚴禁直接拼接表名/欄位名進 SQL** → 僅允許白名單驗證後查詢系統表。
• API 端需驗證 `table` 參數是否存在於允許清單，防止資訊洩露。

jQuery 版本（若專案已引用）

$('#tableSelect').change(function() {
    const table = $(this).val();
    const $col = $('#columnSelect').empty().prop('disabled', true);
    $('#submitBtn').prop('disabled', true);
    if (!table) return;
    $.getJSON('/api/tables/' + encodeURIComponent(table) + '/columns', cols => {
        $col.append('-- 請選擇欄位 --');
        $.each(cols, (_, c) => $col.append(`${c}`));
        $col.prop('disabled', false);
    });
});

總結

「第一層選表 → AJAX 取欄位 → 第二層聯動 → 送出帶參數」是標準前後端分離做法。**後端僅暴露系統表查詢 API，前端負責渲染與狀態控制**，安全且易維護。