Javascript 使用jQuery筛选多个选择字段

我试着用JS创建简单的过滤，但我遇到了多个选择字段的问题，它们不能协同工作，结果变得疯狂（有时什么都不显示）。当我尝试添加第二个或第三个结果不正确或我得到空白页时，如果我只使用一个选择，一切都很好

这是我的密码：

这是我的筛选函数（我有3个函数-每个选择组一个）

---

这里有两个问题，一个是覆盖函数，所以当你只有一个函数时，你会认为你有三个函数，另一个是你没有同时使用所有的过滤器进行过滤

这里需要的不是三个复制粘贴的函数，而是一个函数，它在每次发生更改时应用所有三个过滤器

我还将它改为使用正则表达式而不是.find（），这使它们可以链接在一起，并允许“all”的自然行为，而不是使用一堆if语句

// If any of the filters change
$('select').change(function() {
    runAllFilters();
});

function runAllFilters() {
    var list = $(".news-list .news-item");
    $(list).fadeOut("fast");

    var filtered = $(".news-list article");

    // Get all filter values
    var cost = $('select#sort-cost').val();
    var city = $('select#sort-city').val();
    var age = $('select#sort-age').val();

    // Filter based on all of them 
    filtered = filtered.filter(function() {
        return RegExp(cost).test($(this).attr("data-category")) &&
            RegExp(age).test($(this).attr("data-age")) &&
            RegExp(city).test($(this).attr("data-city"));
    });

    // Show message if there are no results
    filtered.length === 0 
        ? $('.news-list').append("<p id='noresults'>No Results!</p>")
        : $('#noresults').remove()

    // Display Them
    filtered.each(function (i) {
            $(this).delay(100).slideDown("fast");
        });
};

现在分类
成本
全部的
畅销书
销售额
年龄
全部的
3+
5+
9+
城市
全部的
纽约
洛杉矶
拉斯维加斯



第一个

第二个

第三个

第五

您有3个函数，它们调用的都是同一个东西。。。因此，您有一个函数可以解释吗？您定义了一个名为

filterList

的函数，并告诉它执行X。然后您定义了另一个函数，也叫它

filterList

，这次告诉它执行Y。您不能让两个函数调用同一个对象，因此您的第一个

filterList

被覆盖是的，我的错误。但即使使用此修复，它也无法正常工作。结果不正确。好的，我试试这个。但我还有一个问题。如果没有匹配项，如何显示“No results！”？您只需检查筛选步骤返回的数组的长度，如果为零，则将消息添加到DOM中。@Mike现在的答案包括该消息，这只是一个如何实现i的快速示例。如何将其与多选下拉列表结合起来，以查看同一下拉列表中的多个选项？我正在考虑实现这个（）——我通过在数据属性之间添加一个逗号来实现它，即（data category=“1,2,3”）但是，我发现，除非按顺序进行选择，否则选择并不总是正确过滤。我怀疑RegExp与元素的匹配非常紧密？~如果您想单击此处了解我的意思，下面是一个示例设置：

// If any of the filters change
$('select').change(function() {
    runAllFilters();
});

function runAllFilters() {
    var list = $(".news-list .news-item");
    $(list).fadeOut("fast");

    var filtered = $(".news-list article");

    // Get all filter values
    var cost = $('select#sort-cost').val();
    var city = $('select#sort-city').val();
    var age = $('select#sort-age').val();

    // Filter based on all of them 
    filtered = filtered.filter(function() {
        return RegExp(cost).test($(this).attr("data-category")) &&
            RegExp(age).test($(this).attr("data-age")) &&
            RegExp(city).test($(this).attr("data-city"));
    });

    // Show message if there are no results
    filtered.length === 0 
        ? $('.news-list').append("<p id='noresults'>No Results!</p>")
        : $('#noresults').remove()

    // Display Them
    filtered.each(function (i) {
            $(this).delay(100).slideDown("fast");
        });
};

<select name="sort-cost" id="sort-cost">
    <option value=".">All</option>
    <option value="1">Bestsellers</option>
    <option value="2">Sales</option>
</select>