如何在DataTables中实现列间信息的级联过滤？

嗨，我看了你的问题和现有代码，想要实现这种列间级联的过滤效果（选了Name后，Position和Office只显示匹配的选项，其他置灰禁用），其实只要在现有基础上添加动态更新下拉选项的逻辑就行，我帮你梳理下思路和修改方案：

核心思路 #

每次当你选择某个下拉框的选项后，不仅要过滤表格数据，还要根据当前表格的过滤结果，动态更新其他下拉框的可选选项——只保留过滤结果中存在的选项，把不匹配的选项禁用并置灰。

修改后的完整代码 #

先直接给你可以用的完整代码，我会在后面解释关键部分：

HTML部分

<body>
  <div class="searchbox">
    <p>
      Name:
      <select id="dropdown1">
        <option value="">Select</option>
        <option>Ashton Cox</option>
        <option>Brielle Williamson</option>
        <option>Cedric Kelly</option>
      </select>
    </p>
    <p>
      Postion:
      <select id="dropdown2">
        <option value="">Select</option>
        <option>Technical Author</option>
        <option>Integration Specialist</option>
        <option>Javascript Developer</option>
      </select>
    </p>
    <p>
      Office:
      <select id="dropdown3">
        <option value="">Select</option>
        <option>San Francisco</option>
        <option>New York</option>
        <option>Edinburgh</option>
      </select>
    </p>
  </div>

  <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;">
    <thead>
      <tr>
        <th>&#160;</th>
        <th>&#160;</th>
        <th>&#160;</th>
        <th colspan="3" style=" text-align: center;">Information</th>
      </tr>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$3,120</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Director</td>
        <td>Edinburgh</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$5,300</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$4,800</td>
      </tr>
      <tr>
        <td>Cedric Kelly</td>
        <td>Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$3,600</td>
      </tr>
      <tr>
        <td>Jenna Elliott</td>
        <td>Financial Controller</td>
        <td>Edinburgh</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$5,300</td>
      </tr>
      <tr>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>$4,525</td>
      </tr>
    </tbody>
  </table>

  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
  <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
</body>

CSS部分（新增禁用选项的样式）

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

/* 给禁用的下拉选项加灰显样式 */
select option:disabled {
  color: #ccc;
}

JavaScript部分（核心修改）

$(document).ready(function() {
  var table = $('#example').DataTable({
    responsive: true,
    searching: true
  });

  // 定义一个函数：根据指定列的过滤结果，更新目标下拉框的可选状态
  function updateDropdownOptions(columnIndex, dropdownSelector) {
    // 获取当前过滤后该列的所有唯一值
    var validValues = table.column(columnIndex, {search: 'applied'}).data().unique().toArray();
    // 遍历下拉框的每个选项
    $(dropdownSelector + ' option').each(function() {
      var optionValue = $(this).val();
      // 如果是默认的空选项，或者值在有效列表里，就启用；否则禁用
      if (optionValue === '' || validValues.includes(optionValue)) {
        $(this).prop('disabled', false);
      } else {
        $(this).prop('disabled', true);
      }
    });
  }

  // Name下拉框的change事件
  $('#dropdown1').on('change', function() {
    table.columns(0).search(this.value).draw();
    // 更新Position和Office下拉的选项
    updateDropdownOptions(1, '#dropdown2');
    updateDropdownOptions(2, '#dropdown3');
    // 如果清空了Name，要重置其他下拉的选中值
    if (this.value === '') {
      $('#dropdown2').val('');
      $('#dropdown3').val('');
    }
  });

  // Position下拉框的change事件
  $('#dropdown2').on('change', function() {
    table.columns(1).search(this.value).draw();
    // 更新Name和Office下拉的选项
    updateDropdownOptions(0, '#dropdown1');
    updateDropdownOptions(2, '#dropdown3');
    // 如果清空了Position，要重置其他下拉的选中值
    if (this.value === '') {
      $('#dropdown1').val('');
      $('#dropdown3').val('');
    }
  });

  // Office下拉框的change事件
  $('#dropdown3').on('change', function() {
    table.columns(2).search(this.value).draw();
    // 更新Name和Position下拉的选项
    updateDropdownOptions(0, '#dropdown1');
    updateDropdownOptions(1, '#dropdown2');
    // 如果清空了Office，要重置其他下拉的选中值
    if (this.value === '') {
      $('#dropdown1').val('');
      $('#dropdown2').val('');
    }
  });

  // 页面加载完成后，初始化所有下拉的可选状态
  updateDropdownOptions(0, '#dropdown1');
  updateDropdownOptions(1, '#dropdown2');
  updateDropdownOptions(2, '#dropdown3');
});

关键逻辑解释 #

1. updateDropdownOptions函数：这是核心，它用table.column(columnIndex, {search: 'applied'}).data().unique()获取当前已经应用过滤后的列的唯一值，然后遍历目标下拉框的选项，把不在这个列表里的选项禁用并置灰。
2. 下拉框的change事件：每次选择选项后，除了过滤表格，还要调用上面的函数更新其他两个下拉的选项；如果用户清空了当前下拉，还要重置其他下拉的选中值，避免出现矛盾的过滤条件。
3. 禁用选项的样式：通过CSS给option:disabled设置灰色，让用户直观看到哪些选项不可选。

这样修改后，当你选择Name里的Ashton Cox，Position下拉里只有Technical Author可选，Office下拉只有San Francisco可选，完全符合你的需求~

备注：内容来源于stack exchange，提问作者newuser