Bt table filter extension：如何基于首次过滤结果筛选下拉菜单值？

核心思路 #

借助Bootstrap Table的过滤完成事件，提取过滤后数据里目标字段的唯一值，再动态更新第二个下拉菜单的选项。

具体实现步骤 #

• 绑定过滤完成事件
  Bootstrap Table自带post-filter.bs.table事件，每次过滤操作完成后会自动触发，我们可以把更新下拉菜单的逻辑绑定到这个事件上。

• 获取过滤后的数据
  调用bootstrapTable('getData', true)方法，传入true参数就能拿到过滤后的表格数据（不传的话返回原始全量数据）。

• 提取唯一字段值
  用Set数据结构对目标字段的值去重，得到需要展示的下拉选项集合。

• 动态渲染下拉菜单
  先清空下拉菜单原有选项，再遍历去重后的字段值，生成新的<option>元素插入菜单。

代码示例 #

// 页面初始化时执行
$(document).ready(function() {
  // 首次加载先更新一次下拉菜单
  updateSecondDropdown();
  // 绑定过滤完成事件，每次过滤后自动更新
  $('#yourTableId').on('post-filter.bs.table', updateSecondDropdown);
});

function updateSecondDropdown() {
  // 获取过滤后的表格数据
  const filteredData = $('#yourTableId').bootstrapTable('getData', true);
  // 提取目标字段（示例为amount）的唯一值
  const uniqueValues = [...new Set(filteredData.map(item => item.amount))];
  // 定位第二个下拉菜单
  const $dropdown = $('#secondDropdownId');
  
  // 清空原有选项
  $dropdown.empty();
  // 添加默认占位选项
  $dropdown.append('<option value="">请选择</option>');
  // 生成新的下拉选项
  uniqueValues.forEach(value => {
    $dropdown.append(`<option value="${value}">${value}</option>`);
  });
}

注意事项 #

• 请替换代码里的yourTableId为你的表格实际ID，secondDropdownId为第二个下拉菜单的ID，amount为你要提取的目标字段名称。
• 如果过滤操作是通过自定义按钮触发（而非Bootstrap Table内置过滤控件），需要在触发过滤逻辑后手动调用updateSecondDropdown()方法。

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