Question

我想根据用户从多个选择元素中选择的内容，使用jQuery hide / show过滤表。

我希望用户能够从1,2或3个选择元素中选择多个值。所以也许他们会选择2名培训师，1名新员工和1名员工，或者只有1名培训师。计划创建一个在用户点击任何选项时运行的功能。

我看到它的方式，每个select元素都有一个用户选择的值数组。所以我需要遍历每个数组并将其与特定列中的文本进行比较。如果选项仅来自1个选择元素，那将很容易。但是因为它可能是1,2或全部3，所以我无法理解它。

任何帮助都会非常感激。

表：

<table id="reportsTable">
  <thead>
    <th>Report Number</th>
    <th>Date</th>
    <th>Name</th>
    <th>Trainer</th>
    <th>Status</th>
  </thead>
  <tbody>
    <tr>
      <td>12345-1</td>
      <td>05/01/2011</td>
      <td>First Recruit</td>
      <td>First Trainer</td>
      <td>Complete</td>
    </tr>
    <tr>
      <td>12345-2</td>
      <td>05/02/2011</td>
      <td>First Recruit</td>
      <td>Second Trainer</td>
      <td>In Progress</td>
    </tr>
    <tr>
      <td>54321-1</td>
      <td>05/03/2011</td>
      <td>Second Recruit</td>
      <td>First Trainer</td>
      <td>Created</td>
    </tr>
  </tbody>
</table>

选择

<select multiple="multiple" name="trainerFilter">
  <option value="firsttrainer">First Trainer</option>
  <option value="secondtrainer">Second Trainer</option>
</select>
<select multiple="multiple" name="recruitFilter">
  <option value="firstrecruit">First Recruit</option>
  <option value="secondrecruit">Second Recruit</option>
</select>
<select multiple="multiple" name="statusFilter">
  <option value="created">Created</option>
  <option value="inprogress">In Progress</option>
  <option value="complete">Complete</option>
</select>

看起来我无法在8小时内回答我的问题，但这是我想出来的感谢@Spencer Ruport。由于必须考虑所有可能的条目，它最终比我预期的更复杂。用户可以从第一个选择元素中选择一些东西，而不是从第二个选择元素，也可以从第三个选择元素。或者用户可能没有从第一个中选择任何内容，也不从第二个中选择2个。对于任何给定的输入，可能有6个以上的过滤器需要应用。

我确信有比这更好的方法，看起来@Alison可能已经链接到了一个，但它确实有效。

    function filterReports() {
        $('.report').hide(); //Set all rows to hidden.
        trainerVals = $('#trainerFilter').val();
        recruitVals = $('#recruitFilter').val();
        statusVals = $('#statusFilter').val();
        if (trainerVals) { //Check if any trainers are selected.
            $.each(trainerVals, function(index, trainer) {
                filtered = false; 
                classString = '';
                classString += '.' + trainer;
                if (recruitVals) { //Check if trainers and recruits are selected.
                    $.each(recruitVals, function(index, recruit) {
                        filtered = false;
                        secondString = ''; 
                        secondString = classString + '.' + recruit; //Concat to a new string so we keep the old one intact.
                        if (statusVals) { //Check if trainers, recruits and statuses are selected.
                            $.each(statusVals, function(index, status) {
                                filtered = false;
                                finalString = '';
                                finalString += secondString + '.' + status; //Again concat to a new string.
                                $(finalString).show();
                                filtered = true; //By setting filtered to true, we only run the show once.
                            });
                        }
                        if (!filtered) { //If trainers and recruits are selected, but not a status, we need to apply that filter.
                            $(secondString).show();
                            filtered = true;
                        }
                    });
                }
                if (!filtered && statusVals) { //If only trainers and statuses are selected, go through those.
                    $.each(statusVals, function(index, status) {
                        filtered = false;
                        finalString = '';
                        finalString += classString + '.' + status;
                        $(finalString).show();
                        filtered = true;
                    });
                }
                if (!filtered) { //If only trainers are selected, apply that filter.
                    $(classString).show();
                    filtered = true;
                }
            });
        }
        if (!filtered && recruitVals) { //If trainers are not selected, by recruits are, run through the recruits.
            $.each(recruitVals, function(index, recruit) {
                classString = '';
                classString += '.' + recruit;
                if (statusVals) { //Check if recruits and statuses are selected
                    $.each(statusVals, function(index, status) {
                        finalString = '';
                        finalString += classString + '.' + status;
                        $(finalString).show();
                        filtered = true;
                    });
                }
                if (!filtered) { //If only recruits are selected, apply that filter.
                    $(classString).show();
                    filtered = true;
                }
            });
        }
        if (!filtered && statusVals) { //If both trainers and recruits are not selected, but statuses are, run through those.
            $.each(statusVals, function(index, status) {
                classString = '';
                classString += '.' + status;
                $(classString).show();
                filtered = true;
            });
        }
        if (!filtered) {
            //No filters selected.
        }
        $("tr").removeClass("even"); //Remove current zebra striping.
        $("tr:visible:even").addClass("even"); //Add zebra striping only for rows that are visible.
    }

Answer 1

看一下jQuery Datatables plug-in。它使得操作HTML表格变得轻而易举。通过一些简单的设置更改，您可以轻松地完成您正在寻找的内容（以及更多内容）。

请务必查看filtering using select elements

上的示例

Answer 2

使用多个类非常简单（我们通常在它们不用于样式时称它们为标记。）

<table>
  <thead>
    <th>Report Number</th>
    <th>Date</th>
    <th>Name</th>
    <th>Trainer</th>
    <th>Status</th>
  </thead>
  <tbody>
    <tr class="obj_first_recruit obj_first_trainer obj_complete obj_row_item">
      <td>12345-1</td>
      <td>05/01/2011</td>
      <td>First Recruit</td>
      <td>First Trainer</td>
      <td>Complete</td>
    </tr>
    <tr class="obj_first_recruit obj_second_trainer obj_in_progress obj_row_item">
      <td>12345-2</td>
      <td>05/02/2011</td>
      <td>First Recruit</td>
      <td>Second Trainer</td>
      <td>In Progress</td>
    </tr>
    <tr class="obj_second_recruit obj_first_trainer obj_created obj_row_item">
      <td>54321-1</td>
      <td>05/03/2011</td>
      <td>Second Recruit</td>
      <td>First Trainer</td>
      <td>Created</td>
    </tr>
  </tbody>
</table>

然后，只要您想要过滤，只需将所有相应的标记与句点连接起来，例如：

$(".obj_row_item").hide();
$(".obj_first_recruit.obj_second_trainer.obj_in_progress").show();

为简单起见，您可以使下拉列表的值对应于标记名称，使您的语句看起来像：

$("." + $("#dropdown1").val() + "." + $("#dropdown2").val() + "." + $("#dropdown3").val()).show();

使用jQuery从多个select元素中过滤表

2 个答案: