我有它的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>
只是使用表,而不是选择
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>
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>