javascript - 使用多个下拉列表过滤动态表结果

Question

我有一个股票表，如下所示:

 Supplier  |  Category  |  ItemID  |  Stock  |  SafetyLimit  |  Status
------------------------------------------------------------------------
   ABC     |  FOOD      |   001    |    200  |        140    |  Safe
   ABC     |  FOOD      |   004    |     50  |        100    |  Risky
   DEF     |  NON FOOD  |   002    |    150  |        100    |  Safe
   DEF     |  FOOD      |   006    |     32  |         50    |  Risky

我正在尝试根据 vendor (全部、ABC、DEF)、类别(全部、食品、非食品)和状态(安全、风险)为该表创建 3 个过滤器。我找到了这个脚本:

$('select').change(function () {
   var current = this.value;
   if (current == 'all') {
      $('#FilterContainer').find('div.all').show();
   } else {
      $('#FilterContainer').find('div').hide();
      $('#FilterContainer').find('div.all.' + current).show();
   }
   return false;
});

从此完美工作 JS Fiddle ，但就我而言，我的表不是静态的。它的数据是动态填充的。有人能帮我解决这个问题吗？谢谢。

Answer 1

我不知道你的数据结构，但如果它是动态填充的，你可以这样做。

首先，找到每个过滤器的唯一值:

// Example for suppliers
const suppliers = ['ABC', 'ABC', 'DEF', 'DEF'];  // Your suppliers data
const uniqueSuppliers = Array.from(new Set(suppliers));  // ['ABC', 'DEF']
const supplierFilterValues = ['All', ...uniqueSuppliers];  // ['All', 'ABC', 'DEF']

现在用户可以从 supplierFilterValues 中进行选择来过滤数据，例如用户希望仅显示包含“DEF” vendor 的行:

const tableData = [{
    supplier: 'ABC',
    category: 'FOOD',
    itemID: '001',
    stock: '200',
    safetyLimit: '140',
    status: 'Safe',
}, {
    supplier: 'DEF',
    category: 'NON FOOD',
    itemID: '002',
    stock: '150',
    safetyLimit: '100',
    status: 'Safe',
}];
const dataToShow = tableData.filter((item) => item.supplier === 'DEF');