更改过滤器表上的 jQuery 表单选择答案

【问题标题】：jQuery form select on change filter table更改过滤器表上的 jQuery 表单选择
【发布时间】：2011-11-28 14:19:43
【问题描述】：

我有一个包含四个下拉列表的表单，每个下拉列表都有X 列出的值数量；

主题、类型、月份、地点

然后我有一个表，其中包含从具有完全相同列标题的数据库中提取的多行。

主题、类型、月份、地点

每一行数据都不一样。

我想构建一个过滤器系统，其中 $(select).change 函数进来，从所有选定的下拉列表中构建一个值数组，然后将 jquery hide/show 函数应用到它对应的任何地方。表格行具有动态分配给它们的类，例如：

<tr class="subjectVal typeVal monthVal locationVal"><td>lorem ipsum</td>...</tr>

目前我有：

$("form select").change(function() {

    var values = [];        
    $("form select").each(function() {
        if ($(this).val() != "Please select...") {
            values.push($(this).val());
        }
    });

    $("table.events tr.row").each(function() {
        tr = $(this);
        $.each( values, function(index, item){
            if (!$(tr).hasClass(item)) {
                $(tr).hide();

            } else {
                $(tr).show();
            }
        });

    });

});

但是如果值数组包含多个项目，则只有该项目正在过滤表。如果我选择一个主题，然后选择一个位置，它将始终显示所有这些位置，无论我选择了什么主题。

【问题讨论】：

标签： jquery arrays select filter html-table

【解决方案1】：

所以基本上它应该只在所有值都匹配时才显示该行？如果是这样，那么这段代码应该可以工作：

$("table.events tr.row").each(function() {
    var tr = $(this), show = true;
    $.each( values, function(index, item){
        if (!tr.hasClass(item)) {
            show = false;
        }
    });
    tr.toggle(show);
});

【讨论】：