过滤器不适用于 html 表中的多个下拉列表

Question

I am working on a drop-down filter for the table and have a drop-down filter for every column.我正在为表格创建一个下拉过滤器，并为每一列设置一个下拉过滤器。 But the only filter on the first column is working and the rest of the filter is not working and element in column disappear when I try to filter them.但是第一列上唯一的过滤器正在工作，过滤器的其余部分不起作用，当我尝试过滤它们时，列中的元素消失了。

<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<style>
  .bodycontent{
    margin-left: 5%;
    margin-right:5%;
  }
  td{
    padding:10px;
    text-align:center;
  }

</style>
</head>

<body >
    <div class="bodycontent">


<table id="table_format" class="table table-striped ">
                    <thead style="background-color: #70AD47">
                        <tr>
                            <th>Category
                              <select id="filterText" style="display:inline-block;" onchange="filterText()">
                              <option disabled selected>Select</option>
                              <option value="all">All</option>
                              <option value="School Nutrition">School Nutrition</option>
                              <option value="Food Safety">Food Safety</option>

                            </select>
                            </th>


                            <th>Course Title</th>
                            <th>Hours of Instruction
                             <select id="filterText" style="display:inline-block;" onchange="filterText()">
                              <option disabled selected>Select</option>
                              <option value="all">All</option>
                              <option value="one">1</option>
                              <option value="two">2</option>
                              <option value="three">3</option>

                            </select>
                            </th>

                            <th>Target Audience

                              <select id="filterText" style="display:inline-block;" onchange="filterText()">
                                <option disabled selected>Select Audience</option>
                                <option value="all">All</option>
                                <option value="Child Care Homes">Child Care Homes</option>
                                <option value="Child Care Professionals">Child Care Professionals</option>
                                <option value="Child Care Providers">Child Care Providers</option>
                                <option value="Child Nutrition Professionals">Child Nutrition Professionals</option>

                              </select>
                          </th>


                            <th>Key Area
                            <select id="filterText" style="display:inline-block;" onchange="filterText()">
                              <option disabled selected> Choose key area</option>
                              <option value="all">All</option>
                              <option value="1">1</option>
                              <option value="2">2</option>

                            </select>
                          </th>

                            <th>Professional Standard Code
                              <select id="filterText" style="display:inline-block;" onchange="filterText()">
                              <option disabled selected> Choose Standard Code</option>
                              <option value="all">All</option>
                              <option value="1100">1100</option>           
                              <option value="1300">1300</option>
                              <option value="1310">1310</option>
                              <option value="1320">1320</option>


                              <option></option>                            
                            </select>
                          </th>
                            <th>OSSE DEL
                            <select id="filterText" style="display:inline-block;" onchange="filterText()">
                              <option disabled selected> Choose OSSE</option>
                              <option value="all">All</option>
                              <option>3</option>


                            </select>
                          </th>



                        </tr>
                    </thead>

  <tbody id="myTable">


  <tr class="content">


  <>School Nutrition</td>
  <td>Dietary Guidelines for Americans 2015</td>
  <td>1</td>
  <td>School Nutrition Staff, School Nutrition Managers, Child Care Staff</td>
  <td >1</td>
  <td >1300</td>
  <td >-</td>

 </tr>
 <tr class="content">

  <td>School Nutrition</td>
  <td>Nutrition 101 4th edition</td>
  <td>8</td>
  <td>Child Nutrition Professionals</td>
  <td>1</td>
  <td>1300,1310, 1320</td>
  <td>3</td>

 </tr>


 <tr class="content">

  <td >School Nutrition</td>
  <td>CT5- Culinary Techniques - Preparing Breads and Baked Goods</td>
  <td>6</td>
  <td>School Nutrition Staff/Employees, Managers, and Directors</td>
  <td>2</td>
  <td>2100,2130</td>
  <td">-</td>

 </tr>
<tr class="content">

  <td>School Nutrition</td>
  <td>CT6- Culinary Techniques - Using Seasonings</td>
  <td>4</td>
  <td>School Nutrition Staff/Employees, Managers, and Directors</td>
  <td>2</td>
  <td>2100,2130</td>
  <td>-</td>

<tr class="content">

  <td>School Nutrition</td>
  <td>Portion
  Control</td>
  <td>4</td>
  <td>School Nutrition Staff/Employees, Managers, and Directors</td>
  <td>2</td>
  <td>2120,2210</td>
  <td >-</td>

</tbody></table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>


function filterText()
  {  
    var rex = new RegExp($('#filterText').val());
    if(rex =="/all/"){clearFilter()}else{
      $('.content').hide();
      $('.content').filter(function() {
      return rex.test($(this).text());
      }).show();
  }
  }



  function clearFilter()
  {
    $('.filterText').val('');
    $('.content').show();
  }





</script>

</body></html>

Is it possible to get the filter working for all columns?是否可以让过滤器适用于所有列？ Also could multiple filters work at the same time.也可以多个过滤器同时工作。

Answer 1

When you are using id , Javascript assumes that there is just one element with this id .当您使用id 时，Javascript 假定只有一个具有此id 的元素。 Therefore, just the first select will work.因此，只有第一个选择会起作用。

I changed the select elements into this:我将选择元素更改为：

<select class="filterText" style="display:inline-block;" onchange="filterText(this)">
    <option disabled selected>Select</option>
    <option value="all">All</option>
    <option value="School Nutrition">School Nutrition</option>
    <option value="Food Safety">Food Safety</option>
</select>

I changed the id to class and also passed the parameter this into the function.我将id更改为class并将参数this传递给函数。 so that we can know which select element called filterText function.这样我们就可以知道哪个select元素调用了filterText函数。

Simply change your function into this:只需将您的功能更改为：

function filterText(select)
  {  
    var rex = new RegExp($(select).children("option:selected").val());
    if(rex =="/all/"){clearFilter()} else {
          $('.content').hide();
          $('.content').filter(function() {
          return rex.test($(this).text());
          }).show();
      }
  }

Answer 2

This is a "tightened" script that should probably do what you want.这是一个“收紧”的脚本，应该可以满足您的需求。

It consists of two parts:它由两部分组成：

Collect all "valid" filter terms in the array filters .在数组filters收集所有“有效”过滤器术语。 The elements in this array are small arrays themselves: 1. element is the position (column no.), 2. element is the actual filter string.这个数组中的元素本身就是小数组：1. element 是位置（列号），2. element 是实际的过滤器字符串。
Step through all <tr> s.单步执行所有<tr> 。 For each <tr> do the following:对于每个<tr>执行以下操作：
- The individual texts of all child- <td> s are collected into array tds所有 child- <td>的单个文本都收集到数组tds
- Inside the filters.every() -loop the filter strings are now compared to their corresponding column texts taken from tds .在filters.every()循环中，过滤器字符串现在与它们从tds中获取的相应列文本进行比较。
  (Note: every() returns true for an empty array.) （注意：对于空数组， every()返回true 。）
- $('tr').toggle() now shows or hides the current <tr> depending on the result of the filters.every() -loop. $('tr').toggle()现在根据filters.every()循环的结果显示或隐藏当前<tr> 。

PS: I changed the content of your table entries a little bit to make the filtering process a little bit more interesting ... PS：我稍微更改了表条目的内容，以使过滤过程更有趣...

 $('.bodycontent').on('change','select',function(ev) { var filters=[]; $('.filterText').each((k,s)=>{ if (s.value!='all') // exclude "all" as a non-selection filters.push([$(s).closest('th').index(),s.value]); // return: [positon, filtertext] }); $('.content').each(function(i,tr){ let tds=$('td',tr).map((j,td)=>td.textContent).toArray(); // collects individual TD texts $(tr).toggle( filters.every(f=>tds[f[0]].search(f[1])>-1 ) ); // show or hide! }); });

 .bodycontent{ margin-left: 5%; margin-right:5%; } td{ padding:10px; text-align:center; } .filterText {display:inline-block}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <div class="bodycontent"> <table id="table_format" class="table table-striped "> <thead style="background-color: #70AD47"> <tr> <th>Category <select class="filterText"> <option disabled>Select</option> <option value="all">All</option> <option value="School Nutrition">School Nutrition</option> <option value="Food Safety">Food Safety</option> </select> </th> <th>Course Title</th> <th>Hours of Instruction <select class="filterText"> <option disabled>Select</option> <option value="all">All</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="6">6</option> <option value="8">8</option> </select> </th> <th>Target Audience <select class="filterText"> <option disabled>Select Audience</option> <option value="all">All</option> <option value="Child Care Homes">Child Care Homes</option> <option value="Child Care Professionals">Child Care Professionals</option> <option value="Child Care Providers">Child Care Providers</option> <option value="Child Nutrition Professionals">Child Nutrition Professionals</option> </select> </th> <th>Key Area <select class="filterText"> <option disabled> Choose key area</option> <option value="all">All</option> <option value="1">1</option> <option value="2">2</option> </select> </th> <th>Professional Standard Code <select class="filterText"> <option disabled> Choose Standard Code</option> <option value="all">All</option> <option value="1100">1100</option> <option value="1300">1300</option> <option value="1310">1310</option> <option value="1320">1320</option> <option></option> </select> </th> <th>OSSE DEL <select class="filterText"> <option disabled> Choose OSSE</option> <option value="all">All</option> <option>3</option> </select> </th> </tr> </thead> <tbody id="myTable"> <tr class="content"> <td>School Nutrition</td> <td>Dietary Guidelines for Americans 2015</td> <td>1</td> <td>School Nutrition Staff, School Nutrition Managers, Child Care Staff</td> <td >1</td> <td >1300</td> <td >-</td> </tr> <tr class="content"> <td>School Nutrition</td> <td>Nutrition 101 4th edition</td> <td>8</td> <td>Child Nutrition Professionals</td> <td>1</td> <td>1300,1310, 1320</td> <td>3</td> </tr> <tr class="content"> <td >School Nutrition</td> <td>CT5- Culinary Techniques - Preparing Breads and Baked Goods</td> <td>4</td> <td>School Nutrition Staff/Employees, Managers, and Directors</td> <td>1</td> <td>2100,2130</td> <td>-</td> </tr> <tr class="content"> <td>School Nutrition</td> <td>CT6- Culinary Techniques - Using Seasonings</td> <td>4</td> <td>School Nutrition Staff/Employees, Managers, and Directors</td> <td>2</td> <td>2100,2130</td> <td>-</td> </tr> <tr class="content"> <td>Food Safety</td> <td>Portion Control</td> <td>4</td> <td>School Nutrition Staff/Employees, Managers, and Directors</td> <td>3</td> <td>2120,2210</td> <td >-</td> </tr> </tbody> </table> </div>

过滤器不适用于 html 表中的多个下拉列表

问题描述

2 个解决方案

解决方案1
1 2020-07-04 19:05:01

解决方案2
0 2020-07-04 16:37:11

过滤器不适用于 html 表中的多个下拉列表

问题描述

2 个解决方案

解决方案1 1 2020-07-04 19:05:01

解决方案2 0 2020-07-04 16:37:11

解决方案1
1 2020-07-04 19:05:01

解决方案2
0 2020-07-04 16:37:11