使用jQuery从多个选择元素中筛选表格 [英] Using jQuery to filter a table from multiple select elements

问题描述

我希望用户能够选择多个选择元素来自1,2或3个选择元素的值。所以也许他们会选择2名培训师，1名招聘人员和1名身份，或者只选一名培训师。规划创建一个函数，当用户点击任何选项时运行。

我看到它的方式，每个select元素将有一个值的数组，已经选择。所以我需要遍历每个数组，并将其与特定列中的文本进行比较。如果选项仅来自一个选择元素，将会很容易。但是，因为它可能是1,2或3，我很难得到我的头。

任何帮助将非常感激。 b
$ b

表：

 < table id =reportsTable> 
< thead> 
< th>报告编号< / th> 
< th>日期< / th> 
< th>名称< / th> 
培训师< / th> 
< th>状态< / th> 
< / thead> 
< tbody> 
< tr> 
< td> 12345-1< / td> 
< td> 05/01/2011< / td> 
< td> First Recruit< / td> 
< td> First Trainer< / td> 
< td>完成< / td> 
< / tr> 
< tr> 
< td> 12345-2< / td> 
< td> 05/02/2011< / td> 
< td> First Recruit< / td> 
< td> Second Trainer< / td> 
< td>进行中< / td> 
< / tr> 
< tr> 
< td> 54321-1< / td> 
< td> 05/03/2011< / td> 
< td> Second Recruit< / td> 
< td> First Trainer< / td> 
< td>已创建< / td> 
< / tr> 
< / tbody> 
< / table> 
  

选择：

 < select multiple =multiplename =trainerFilter> 
< option value =firsttrainer> First Trainer< / option> 
< option value =secondtrainer> Second Trainer< / option> 
< / select> 
< select multiple =multiplename =recruitFilter> 
< option value =firstrecruit> First Recruit< / option> 
< option value =secondrecruit> Second Recruit< / option> 
< / select> 
< select multiple =multiplename =statusFilter> 
< option value =created>已创建< / option> 
< option value =inprogress>进行中< / option> 
< option value =complete>完成< / option> 
< / select> 
  

看起来我不能在8小时内回答我的问题，但这是我来感谢@Spencer Ruport。由于必须考虑所有可能的条目，结果比我想象的要复杂得多。用户可以从第一个select元素中选择一些，第二个中没有任何东西，第二个中可能有两个。或者，也许用户不会从第一个和第2个中选择任何东西。对于任何给定的输入，可能有6+过滤器比需要应用。

我相信有一个更好的办法比这个，看起来像@Alison可能已经链接到一个，但它的工作。

pre $函数filterReports（）{
$（'。report'）。隐藏（）; //将所有行设置为隐藏。
trainerVals = $（'＃trainerFilter'）。val（）;
recruitVals = $（'＃recruitFilter'）。val（）;
statusVals = $（'＃statusFilter'）。val（）;
if（trainerVals）{//检查是否有任何培训师被选中。
$ .each（trainerVals，function（index，trainer）{
filtered = false;
classString ='';
classString + ='。'+ trainer; $ b $如果（recruitVals）{//检查是否选择了培训者和招募者
$ .each（recruitVals，function（index，recruit）{
filtered = false;
secondString ='';
secondString = classString +'。'+ recruit; //将一个新的字符串Concat保存为一个新的字符串
if（statusVals）{//检查是否有教师，新兵和状态被选中。
$ .each（statusVals，function（index，status）{
filtered = false;
finalString ='';
finalString + = secondString +'。'+ status; / /再次连接到一个新的s tring。
$（finalString）.show（）;
filtered = true; //通过设置过滤为true，我们只运行一次显示。
}）;

if（！filtered）{//如果选择了培训者和新兵，但不是状态，我们需要应用该过滤器。
$（secondString）.show（）;
filtered = true;
}
}）;
}
if（！filtered&& statusVals）{//如果只有教练和状态被选中，那么通过这些。
$ .each（statusVals，function（index，status）{
filtered = false;
finalString ='';
finalString + = classString +'。'+ status;
$（finalString）.show（）;
filtered = true;
}）;
}
if（！filtered）{//如果只选择了培训者，则应用该过滤器。
$（classString）.show（）;
filtered = true;
}
}）;
}
if（！filtered&& recruitVals）{//如果没有选择培训者，则由新兵进行培训。
$ .each（recruitVals，function（index，recruit）{
classString ='';
classString + ='。'+ recruit;
if（statusVals）{//检查是否选择了新兵和状态
$ .each（statusVals，function（index，status）{
finalString ='';
finalString + = classString +'。'+ status;
$（finalString）.show（）;
filtered = true;
}）;
}
if（！filtered）{//如果只选择了新兵，
$（classString）.show（）;
filtered = true;
}
}）;
}
if（！filtered&& statusVals）{//如果训练员和新兵都没有被选中，但状态是通过这些。
$ .each（statusVals，function（index，status）{
classString ='';
classString + ='。'+ status;
$（classString）.show（ ）;
filtered = true;
}）;

if（！filtered）{
//未选择任何过滤器。
}
$（tr）。removeClass（even）; //删除当前的斑马条纹。
$（tr：visible：even）。addClass（even）; //仅为可见的行添加斑马条纹。

解决方案

使用多个类（我通常在不用于样式的时候把它们叫做标记）。

 < table> 
< thead> 
< th>报告编号< / th> 
< th>日期< / th> 
< th>名称< / th> 
培训师< / th> 
< th>状态< / 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>完成< / 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>进行中< / 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>已创建< / td> 
< / tr> 
< / tbody> 
< / table> 
  

然后您可以随时过滤所有相应的标记，例如：

  $（。obj_row_item）。hide（）; 
 $（。obj_first_recruit.obj_second_trainer.obj_in_progress）。show（）; 
 
 
 
 
 $ b为了简单起见，您可以使下拉列表的值与标记名称相对应，例如： 
 
 
  $（。+ $（＃dropdown1）.val（）+。+ $ ＃dropdown2）。val（）+。+ $（＃dropdown3）。val（））。show（）; 
  
 
I want to filter a table using jQuery hide/show based on what the user selects from multiple select elements.

I want the user to be able to select multiple values from 1, 2 or 3 of the select elements. So maybe they'll select 2 trainers, 1 recruit and 1 status, or maybe just 1 trainer. Planning on creating a function that will run when the user clicks any of the options.

The way I see it, each select element will have an array of values that the user has selected. So I'll need to loop through each array and compare it to the text in that specific column. Would be easy enough if the options were from only 1 select element. But since it could be 1, 2 or all 3, I'm having trouble getting my head around it.

Any help would be GREATLY appreciated.

Table:
<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>
Selects:
<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>
Looks like I can't post an answer to my question for 8 hours but this is what I came up with thanks to @Spencer Ruport. It ended up being a lot more convoluted than I expected thanks to having to account for all possible entries. The user could select something from the first select element, nothing from the second, and maybe 2 from the third. Or maybe the user doesn't select anything from the first and 2 from the second. For any given input, there may be 6+ filters than need to be applied.

I'm sure there's a better way than this, and it looks like @Alison may have linked to one, but it works.
    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.
    }

解决方案
This is pretty simple to do using multiple classes (I usually call them markers when they're not being used for styles.)
<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>
Then anytime you want to filter just concatenate all the corresponding markers with periods for example:
$(".obj_row_item").hide();
$(".obj_first_recruit.obj_second_trainer.obj_in_progress").show();
For simplicity's sake you can make the values of the dropdowns correspond to the marker names making your statement look something like:
$("." + $("#dropdown1").val() + "." + $("#dropdown2").val() + "." + $("#dropdown3").val()).show();


                        
这篇关于使用jQuery从多个选择元素中筛选表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！