如何修改Bootstrap生成的DataTables下拉选择框默认值？

我来帮你解决这个问题！你之前的尝试没成功，主要是因为这个下拉框没有设置id属性，所以用getElementById找不到对应的元素。下面给你两种可行的方案，优先推荐第一种（更符合DataTables的官方使用规范）：

方案1：通过DataTables初始化配置设置（推荐） #

DataTables本身提供了pageLength配置项，可以直接指定默认显示的行数，设置为-1就会对应下拉框里的"All"选项，而且会自动同步下拉框的选中状态。

在初始化你的DataTables时添加这个配置：

// 假设你的表格id是DataTables_Table_0
$('#DataTables_Table_0').DataTable({
    pageLength: -1, // 默认显示全部数据，下拉框自动选中"All"
    // 这里放你原本的其他配置项，比如columns、ajax等
});

方案2：直接操作DOM元素（适合无法修改初始化代码的场景） #

如果已经完成了DataTables的初始化，或者没法修改初始化代码，可以通过DOM选择器找到这个下拉框，设置选中值后触发change事件，让DataTables响应这个变化（只改value不会自动刷新表格）。

原生JavaScript写法： #

// 通过name属性定位下拉框
const lengthSelect = document.querySelector('select[name="DataTables_Table_0_length"]');
// 设置选中值为-1
lengthSelect.value = '-1';
// 触发change事件，通知DataTables更新分页
lengthSelect.dispatchEvent(new Event('change'));

jQuery写法（如果项目中使用了jQuery）： #

$('select[name="DataTables_Table_0_length"]').val('-1').trigger('change');

为什么之前的方法失败？ #

你尝试用document.getElementById('DataTables_Tab...')，但你的下拉框元素只有name、aria-controls和class属性，并没有id，所以这个方法无法找到对应的元素，自然无法修改选中状态。

内容的提问来源于stack exchange，提问作者Johnathan Brown Johnny