Javascript 使用jQuery从选项筛选列中的数据

我处理过滤，我有问题，我有4个选项输入，其中我有一些数据需要在表中过滤，现在我只过滤一列的数据，但问题是如果我要再添加一个过滤器，脚本将不起作用，并从最后选择的值过滤数据。但我需要在选项数据筛选中选择2-4个值

我的代码： JS:

JSFIddle-

因此，如果在选项3中，你将选择023并点击添加过滤器，它将工作，但如果我选择023和选项4BOOKED它将只过滤预订状态，问题在哪里？

通过在每个过滤器上执行

$（“#orderListData td”+filter.）.parent（）。show（）

，实际上，您显示的是与其中一个过滤器匹配的每一行。而您必须只显示那些可以满足所有筛选器的行

因此，不要循环通过

过滤器

并检查是否有

td

元素满足它，而是循环通过

行

并检查它是否满足每个过滤器

使用此代码执行此操作（仅更改

filterData

功能）

$（“#取消过滤器”）.hide（）；
$（“#过滤器按钮”）。单击（函数（）{
getSelectedVal（）
filterData（）
过滤器=[]；
$（“#取消过滤器”）.fadeIn（）；
});
var过滤器=[]；
函数getSelectedVal（）{
var materialCode=$（“#materialCode选项：选定”）.text（）
var plantCode=$（“#plantCode选项：选中”）.text（）
var-vsCode=$（'#vsCode选项：选中'）。text（）
var status=$（'#statusCode选项：selected'）。text（）
applyFilter（材料代码1）
applyFilter（工厂代码，2）
applyFilter（vsCode，3）
applyFilter（状态，4）
}
函数applyFilter（值，id）{
如果（值）
filters.push（'.column'+id+'：包含（'+value+'））；
}
函数filterData（）{
如果（filters.length>0）{
var rows=$（“#orderListData”）.find（“tr”）；
rows.hide（）；
//检查是否有任何行满足所有筛选器
$。每个（行，（i，行）=>{
if（filters.every（filter=>$（row.find（filter.length））{
$（行）.show（）；
}
})
}
}
$（“#取消过滤器”）。单击（函数（）{
var$rows=$（'#orderlistdatatr'）；
$rows.show（）
$（“#取消过滤器”）.fadeOut（）；
});
.row{
宽度：100%；
显示器：flex；
柔性包装：包装；
}
.行：：之后{
显示：表格；
明确：两者皆有；
内容：“；
}

从那把小提琴上看，它似乎在应用一个或过滤器。如果我添加023和booked，我会得到包含023或booked记录的结果@Nathancamp现在我只过滤一列，这是可行的，但我想如果我想再添加一个过滤器，它将不起作用
$("#cancelFilters").hide();

$('#filterButton').click(function () {
    getSelectedVal()
    filterData()
    filters = [];
    $("#cancelFilters").fadeIn();
});

var filters = [];

function getSelectedVal() {
    var materialCode = $('#materialCode option:selected').text()
    var plantCode = $('#plantCode option:selected').text()
    var vsCode = $('#vsCode option:selected').text()
    var status = $('#statusCode option:selected').text()

    applyFilter(materialCode, 1)
    applyFilter(plantCode, 2)
    applyFilter(vsCode, 3)
    applyFilter(status, 4)
}

function applyFilter(value, id) {
    if (value)
        filters.push('.column' + id + ':contains(' + value + ')');
}


function filterData() {
    if (filters.length > 0) {
        var rows = $("#orderListData").find("tr").hide();

        filters.forEach(filter => {
            $("#orderListData td" + filter).parent().show();
        })

    }
}

$('#cancelFilters').click(function () {
    var $rows = $('#orderListData tr');
    $rows.show()
    $("#cancelFilters").fadeOut();
});