使用Bootstrap Multi-Select插件无法清除下拉框选中文本求助

架构老林

2026-5-15

解决Bootstrap Multi-Select无法清除选中文本的问题

我之前在使用Bootstrap Multi-Select插件时也碰到过一模一样的问题！那些empty、reset方法只能处理选中值，但显示的文本没法同步更新。试试下面这几个方案，应该能彻底解决：

方案1：使用插件内置的取消选中方法+刷新

直接调用插件的deselectAll方法取消所有选中项，再用refresh更新显示状态，这是最直接的方式：

$('#btnReset').click(function () {
  // 取消所有选中项，第二个参数false表示不触发change事件（可选，根据你的需求调整）
  $('#EventCategoryDDL').multiselect('deselectAll', false);
  // 刷新插件，同步更新显示的文本
  $('#EventCategoryDDL').multiselect('refresh');
  // 重置DataTables的搜索状态
  oTable.columns().search('').draw();
});

这个方法会让插件的显示文本自动变回你设置的nonSelectedText: '-- Select Category --'。

方案2：手动重置原生Select再刷新

如果方案1没生效，可能是插件内部状态和原生select不同步，手动重置原生select的选中状态后再刷新：

$('#btnReset').click(function () {
  // 取消原生select中所有选中的选项
  $('#EventCategoryDDL option:selected').prop('selected', false);
  // 刷新插件，强制同步显示状态
  $('#EventCategoryDDL').multiselect('refresh');
  // 重置DataTables搜索
  oTable.columns().search('').draw();
});

额外注意事项

确保插件初始化和按钮事件绑定都在DOM加载完成后执行，把代码放在$(document).ready()里：

$(document).ready(function() {
  // 初始化Multi-Select插件
  $("#EventCategoryDDL").multiselect({
    includeSelectAllOption: true,
    nonSelectedText: '-- Select Category --'
  });

  // 绑定重置按钮事件
  $('#btnReset').click(function () {
    $('#EventCategoryDDL').multiselect('deselectAll', false);
    $('#EventCategoryDDL').multiselect('refresh');
    oTable.columns().search('').draw();
  });
});