如何实现先选Name下拉框再启用其他DataTable筛选下拉框？

需求实现要点 #

• 页面加载完成后，仅「Name」下拉框处于启用状态，其余筛选下拉框默认禁用
• 当「Name」下拉框选中有效选项后，自动启用其他所有筛选下拉框
• 点击「Clear Filters」按钮时，重置所有筛选条件，同时恢复初始状态（仅「Name」启用，其余禁用）

完整实现代码 #

HTML部分

<div class="filter-container">
  <label for="name-filter">Name:</label>
  <select id="name-filter" class="filter-select">
    <option value="">Select Name</option>
    <option value="Alice">Alice</option>
    <option value="Bob">Bob</option>
    <option value="Charlie">Charlie</option>
  </select>

  <label for="age-filter">Age:</label>
  <select id="age-filter" class="filter-select" disabled>
    <option value="">Select Age</option>
    <option value="25">25</option>
    <option value="30">30</option>
    <option value="35">35</option>
  </select>

  <label for="city-filter">City:</label>
  <select id="city-filter" class="filter-select" disabled>
    <option value="">Select City</option>
    <option value="New York">New York</option>
    <option value="London">London</option>
    <option value="Paris">Paris</option>
  </select>

  <button id="clear-filters">Clear Filters</button>
</div>

<table id="data-table" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>30</td>
      <td>London</td>
    </tr>
    <tr>
      <td>Charlie</td>
      <td>35</td>
      <td>Paris</td>
    </tr>
    <tr>
      <td>Alice</td>
      <td>30</td>
      <td>London</td>
    </tr>
  </tbody>
</table>

CSS部分

.filter-container {
  margin: 20px 0;
}

.filter-select {
  margin: 0 10px;
  padding: 5px;
}

#clear-filters {
  margin-left: 10px;
  padding: 5px 15px;
}

JavaScript部分

$(document).ready(function() {
  // 初始化DataTable
  const table = $('#data-table').DataTable();

  // 获取所有筛选下拉框元素
  const nameFilter = $('#name-filter');
  const otherFilters = $('.filter-select').not('#name-filter');

  // 初始化状态：禁用其他筛选框
  otherFilters.prop('disabled', true);

  // 监听Name下拉框变化
  nameFilter.on('change', function() {
    const hasSelected = $(this).val() !== '';
    // 根据是否选中Name，切换其他筛选框的启用状态
    otherFilters.prop('disabled', !hasSelected);
    
    // 同步DataTable筛选逻辑
    table.column(0).search($(this).val()).draw();
  });

  // 其他筛选框的筛选逻辑
  $('#age-filter').on('change', function() {
    table.column(1).search($(this).val()).draw();
  });

  $('#city-filter').on('change', function() {
    table.column(2).search($(this).val()).draw();
  });

  // 清空筛选按钮逻辑
  $('#clear-filters').on('click', function() {
    // 重置所有下拉框选中值
    $('.filter-select').val('');
    // 恢复初始状态：禁用其他筛选框
    otherFilters.prop('disabled', true);
    // 清空DataTable所有筛选并刷新
    table.columns().search('').draw();
  });
});

关键逻辑说明 #

1. 初始状态设置：页面加载完成后，直接通过prop('disabled', true)禁用除Name外的所有筛选下拉框
2. Name下拉框监听：当Name选中有效值（非空）时，启用其他下拉框；若清空Name选项，则重新禁用其他下拉框，同时同步DataTable的列筛选
3. 清空按钮处理：点击按钮后，重置所有下拉框的选中值，恢复其他下拉框的禁用状态，同时清空DataTable的所有筛选条件并刷新表格

内容的提问来源于stack exchange，提问作者newuser