如何使用选择下拉列表来过滤表TD值

Question

我有它的TD值是对应于所述选择下拉的值的表。这样被选择的下拉时，我想表根据所选择的值来过滤其表行。例如，如果选择一个，该表将进行过滤，只显示两个表行其其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>

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