HTML 下拉列表聯動實戰：jQuery DataTable 多條件篩選完整解決方案

場景描述

在使用 jQuery DataTable 實現的表格中，擁有「狀態」與「在線」兩個下拉列表，需實現兩者聯動篩選：選擇狀態後，在線下拉選項動態更新；反之亦然。要求前端純 JavaScript 實現，無需後端配合。

核心思路：事件驅動 + 客戶端資料過濾

1. 監聽兩個 <select> 的 change 事件
2. 讀取當前所有表格行的原始資料（可緩存至陣列）
3. 根據已選條件過濾資料，動態重建第二個下拉選項
4. 觸發 DataTable 重繪

完整實現代碼

// 假設表格 ID 為 example，狀態下拉 ID 為 filterStatus，在線下拉 ID 為 filterOnline
var table = $('#example').DataTable();
var allData = table.rows({search:'applied'}).data().toArray(); // 緩存當前顯示資料

function rebuildOnlineOptions(selectedStatus) {
    var onlineSet = new Set();
    allData.forEach(function(row) {
        if (!selectedStatus || row.status === selectedStatus) {
            onlineSet.add(row.online);
        }
    });
    var $online = $('#filterOnline');
    $online.empty().append('全部');
    onlineSet.forEach(function(val) {
        $online.append(''+val+'');
    });
}

$('#filterStatus').on('change', function() {
    var status = $(this).val();
    rebuildOnlineOptions(status);
    table.column(2).search(status).draw(); // 假設狀態在第 3 列
});

$('#filterOnline').on('change', function() {
    var online = $(this).val();
    table.column(3).search(online).draw(); // 假設在線在第 4 列
});

// 初始化
rebuildOnlineOptions('');

進階優化：使用 DataTable 內建搜尋 API

若資料量極大，建議改用 $.fn.dataTable.ext.search 自訂過濾函數，避免重複遍歷 DOM：

$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
    var status = $('#filterStatus').val();
    var online = $('#filterOnline').val();
    if (status && data[2] !== status) return false;
    if (online && data[3] !== online) return false;
    return true;
});

$('#filterStatus, #filterOnline').on('change', function() {
    table.draw();
});

常見坑點提醒

• 下拉選項值需與表格單元格內容完全一致（含大小寫、空白）
• 若使用 AJAX 獲取第二級選項，務必在 success 回調中重新初始化 DataTable 或調用 table.draw()
• 記得在頁面卸載時移除自訂搜尋函數：$.fn.dataTable.ext.search.pop()