JS：多个选择过滤器，更改一个过滤器会忽略其他选择中选择的值

Question

我们有一个Wordpress网站，其页面列出了所有可用的文档。我必须在该表中添加两个下拉/选择过滤器，一个可以按文档类型（法律文档，行政文档等）以及文档适用的不同类型的产品进行过滤。该表几乎如下所示：

<?php if ( have_posts() ) : ?>
    <div id="js-document-list">
        <table>
            <thead>
            <tr>
                <td>Product</td>
                <td>Document type</td>
            </tr>
            </thead>
            <div>
                <div>
                    <p>Filter on:</p>
                    <select name="product_filter" id="product_filter" class="js-product-filter search">
                        <option value="none">Product</option>
                        <option value="product1">Product 1</option>
                        <option value="product2">Product 2</option>
                        ...
                    </select>
                    <select name="document_type_filter" id="document_type_filter" class="js-document-filter search">
                        <option value="none">Document type</option>
                        <option value="document_type1">Document type 1</option>
                        <option value="document_type2">Document type 2</option>
                        ...
                    </select>
                </div>
            </div>
            <tbody class="list">
                <?php while ( have_posts() ) : the_post(); ?>
                <tr class="js-documents">
                    <td class="js-products">product1, product2, ...</td>
                    <td class="js-document-types">document_type1, document_type2, ...</td>
                </tr>
                <?php endwhile; ?>
            </tbody>
        </table>
    </div>
<?php endif; ?>

我已经写了一些可以实现预期功能的Javascript（某些类名称可能与HTML中的名称不同，尚未更新下面的脚本）；

jQuery(document).ready(function ($) {
    var filterRows = function(condition, row) {
        if (condition) {
            row.show();
        } else {
            row.hide();
        }
    };

    $('.js-document_filter').change(function() {
        var productFilterValue = $('#product_filter option:selected').val();
        var documentTypeFilterValue = $('#document_type_filter option:selected').val();

        var productFilterSelected = productFilterValue !== 'none';
        var documentFilterSelected = documentTypeFilterValue !== 'none';

        var tableRow = $('.js-documents');
        tableRow.each(function () {
            var documentType = $(this).find('.js-document_types').html();
            var products = $(this).find('.js-products').html();

            if (!productFilterSelected && !documentFilterSelected) {
                $(this).show();
            } else if (productFilterSelected && !documentFilterSelected) {
                filterRows(products.indexOf(productFilterValue) > -1, $(this));
            } else if (!productFilterSelected && documentFilterSelected) {
                filterRows(documentType.indexOf(documentTypeFilterValue) > -1, $(this));
            } else {
                filterRows(products.indexOf(productFilterValue) > -1 && documentType.indexOf(documentTypeFilterValue) > -1, $(this));
            }
        });
    });
});

但是我现在必须对其进行更改，以便表过滤器脚本可以用于整个网站中的不同表（即使任何地方都没有其他表），因此脚本中的所有内容都必须是动态的。我已将其更改为模块（存储在src/js/modules/table-filter.js中，并导入到app.js的{​​{1}}文件中；

src/js

import tableFilter from './modules/table-filter'; document.addEventListener('DOMContentLoaded', () => { tableFilter({ selectDropdown: '#document_type_filter', tableRow: '.js-documents', tableData: '.js-document-types' }); tableFilter({ selectDropdown: '#product_filter', tableRow: '.js-documents', tableData: '.js-products' }); }); ：

table-filter.js

从某种意义上说，当我在第一个下拉列表中更改一个值时，便会根据该值对表格进行过滤，但是当我在第二个下拉列表中选择一个值时，第一个值将被覆盖，并且仅进行过滤根据第二个值。有没有办法同时过滤两个选择？

PS。我尝试使用List.js，但是我很难在List.js的const $ = window.jQuery; const proto = { init({ selectDropdown, tableRow, tableData }) { this.dropdown = document.querySelector(selectDropdown); this.row = $(tableRow); this.data = $(tableData); this.filter = this.filter.bind(this); this.dropdown.addEventListener('change', this.filter); return this; }, filter() { const filterValue = this.dropdown.value; const data = this.data; const valueSelected = filterValue !== 'none'; $(this.row).each(function() { let tableContent = $(this).find(data).html(); tableContent = tableContent.replace('&', '&'); if (!valueSelected) { $(this).show(); } else if (tableContent.indexOf(filterValue) > -1) { $(this).show(); } else { $(this).hide(); } }); } }; export default (spec) => Object.create(proto).init(spec); 函数中获取项目值，即使我这样做，我仍在执行与上面的代码几乎相同的操作。