Question

我有一个包含四个下拉列表的表单，每个表单都列出了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();
            }
        });

    });

});

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

Answer 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);
});

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

1 个答案: