javascript - 如何使用select dropdown过滤表td值

Question

我有一个表，其 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>

Answer 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>