如何为DataTables中的下拉菜单添加选择提示文本？

要解决下拉菜单默认空白的问题，只需修改buildSelect函数中创建下拉选项的逻辑，添加带提示文本的默认选项，并确保其默认选中且不可被用户选择：

修改后的完整代码 #

JavaScript部分 #

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

  buildSelect(table);
 
  table.on('draw', function() {
    buildSelect(table);
  });
  $('#test').on('click', function() {
    table.search('').columns().search('').draw();
  });
});

function buildSelect(table) {
  var counter = 0;
  table.columns([0, 1, 2]).every(function() {
    var column = table.column(this, {
      search: 'applied'
    });
    counter++;
    // 获取当前列的标题，生成对应提示文本
    var columnTitle = this.header().text().trim();
    // 创建带提示的下拉菜单，默认选中提示项并禁用
    var select = $(`<select><option value="" disabled selected>请选择${columnTitle}</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))));
    } else {
      select.val('');
    }
  });
}

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>
<div class="searchbox">
<p>Name: 
  
  <span id="dropdown1">
  </span>
</p>

<p>Postion: <span id="dropdown2">
  </span>
</p>

<p>Office: <span id="dropdown3">
</span>
</p>
  <button type="button" id="test">Clear Filters</button>
</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>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>
          
            
          </tr></tbody></table>
</div>

关键修改说明 #

1. 动态匹配列名提示：通过this.header().text().trim()获取当前列标题，让提示文本与列名对应（如“请选择Name”“请选择Position”），用户体验更直观。
2. 默认提示项设置：将原空白选项替换为带提示文本的选项，添加disabled避免用户选中提示项，selected让页面加载时默认显示提示。
3. 清空筛选重置状态：在筛选状态判断逻辑中添加else分支，确保清空筛选后下拉菜单自动回到提示选项状态。

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