如何使用选择下拉列表过滤表 td 值答案

【问题标题】：How to use select dropdown to filter table td value如何使用选择下拉列表过滤表 td 值
【发布时间】：2019-02-05 19:46:26
【问题描述】：

我有一个表，它的 td 值对应于选择下拉列表的值。 So when the dropdown is being selected, i would like the table to filter its table row according to the selected value.例如，如果选择了一个，该表将进行过滤，仅显示其 td 值为 1 的两个表行。目前，该代码由于某种原因无法正常工作。

$(document).ready(function($) {
 
  $('#select').change(function() {
   
    var selection = $(this).val();
    var dataset = $('#select').find('tr');
  
    dataset.show();
    
    dataset.filter(function(index, item) {
      return $(item).find('td:first-child').text().split(',').indexOf(selection) === -1;
    }).hide();

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id='select'>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
</select>

<table border="2">


<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>1</td></tr>

</table>

【问题讨论】：

数据表是否与您的系统不兼容？如果没有，请尝试使用它。这将为您提供很多选择。
在上述代码中使用$('table').find('tr') 代替$('#select').find('tr')
您可以根据自己的要求自定义和使用jQuery Data Table。

标签： javascript jquery html css

【解决方案1】：

只使用表格而不是选择

var dataset = $('table').find('tr');

$(document).ready(function($) {
 
  $('#select').change(function() {
   
    var selection = $(this).val();
     var dataset = $('table').find('tr');
  
    dataset.show();
    
    dataset.filter(function(index, item) {
      return $(item).find('td:first-child').text().split(',').indexOf(selection) === -1;
    }).hide();

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id='select'>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
</select>

<table border="2">


<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>1</td></tr>

</table>

【讨论】：

【解决方案2】：

selectfilter($('table'),$('#select').val());

$('#select').change(function() {       
    var selection = $(this).val();  
    $('table').find('tr').show();        
    selectfilter($('table'),selection);
  });
  
function selectfilter(table ,selection)
{
  table.find('tr').filter(function(index, item) {
      return $(item).find('td:first-child').text().split(',').indexOf(selection) === -1;
    }).hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='select'>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
</select>

<table border="2">


<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>1</td></tr>

</table>

【讨论】：