如何禁用其他下拉框，直到首个Name下拉框被选中？

需求说明 #

要求用户必须先选择Name下拉框的非空选项，才能操作Position和Office下拉框，默认状态下后两个下拉框为禁用状态。

实现步骤 #

1. 初始禁用后两个下拉框：在创建下拉框的逻辑中，给Position（dd2）和Office（dd3）默认添加disabled属性，使其不可操作。
2. 监听Name下拉框状态：给Name下拉框绑定change事件，选中非空值时启用后两个下拉框；若选回默认"Select"选项，则重新禁用它们。
3. 同步表格重绘后的状态：DataTables表格重绘后会重新生成下拉框，需要重新同步后两个下拉框的禁用状态。
4. 重置过滤器时恢复初始状态：点击"Clear Filters"按钮时，不仅清空筛选条件，还要将所有下拉框重置为初始状态（Name清空，后两个禁用）。

修改后的完整代码 #

JavaScript代码

$(document).ready(function() {
  $('#table-wrap').hide();
  var table = $('#example').DataTable({
    responsive: true,
    mark: true,
    stateSave: false,
    searching: true
  });

  buildSelect(table);
  
  // 监听Name下拉框，控制其他下拉框的启用/禁用
  $('#dd1').on('change', function() {
    var isNameSelected = $(this).val() !== "";
    $('#dd2, #dd3').prop('disabled', !isNameSelected);
  });

  $('#table-filter').on('change', function () {
    $('#table-wrap').show();
    table.columns.adjust();
    table.search(this.value).draw();
  });

  table.on('draw', function() {
    buildSelect(table);
    // 表格重绘后，重新同步下拉框禁用状态
    var isNameSelected = $('#dd1').val() !== "";
    $('#dd2, #dd3').prop('disabled', !isNameSelected);
  });

  $('#test').on('click', function() {
    table.search('').columns().search('').draw();
    $('#table-wrap').hide();
    // 重置所有下拉框状态
    $('#dd1, #dd2, #dd3').val("");
    $('#dd2, #dd3').prop('disabled', true);
  });
});

function buildSelect(table) {
  var counter = 0;
  table.columns([0, 1, 2]).every(function() {
    var column = table.column(this, {
      search: 'applied'
    });
    counter++;
    // 创建下拉框时，给后两个默认添加disabled属性
    var select = $('<select id="dd' + counter + '"' + (counter > 1 ? ' disabled' : '') + '><option value="">Select</option></select>')
      .appendTo($('#dropdown' + counter).empty())
      .on('change', function() {
        var val = $.fn.dataTable.util.escapeRegex($(this).val());
        column.search(val ? '^' + val + '$' : '', true, false).draw();
      });

    column.data().unique().sort().each(function(d, j) {
      select.append('<option value="' + d + '">' + d + '</option>');
    });

    var currSearch = column.search();
    if (currSearch) {
      select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch))));
    }
  });
}

HTML代码

<!DOCTYPE html>
<html>
<head>
  <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>
  <meta charset=utf-8 />
  <title>DataTables - JS Bin</title>
</head>
<body>
  <div class="searchbox" id="table-filter">
    <p><label for="dd1">Name:</label> <span id="dropdown1"></span></p>
    <p><label for="dd2">Position:</label> <span id="dropdown2"></span></p>
    <p><label for="dd3">Office:</label> <span id="dropdown3"></span></p>
    <button type="button" id="test">Clear Filters</button>
  </div>
  <div id="table-wrap">
    <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>&nbsp;</th>
          <th>&nbsp;</th>
          <th>&nbsp;</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>ID.AI</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$3,120</td>
        </tr>
        <tr>
          <td>Garrett -2</td>
          <td>Director</td>
          <td>Edinburgh</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$5,300</td>
        </tr>
        <tr>
          <td>Ashton.1 -2</td>
          <td>Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
          <td>$4,800</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

关键细节说明 #

• 下拉框的禁用状态通过disabled属性控制，使用jQuery的prop()方法动态切换。
• 表格重绘后必须重新同步状态，因为DataTables会重新生成下拉框元素，原有状态会丢失。
• 清空过滤器时要完全重置所有下拉框，确保回到初始的禁用状态。

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