我有一张桌子。我希望用户能够通过他们在给定下拉列表中选择的选项来过滤表格。我有它的工作,但它是混乱和难以添加新行(不能让它在 jsfiddle 中工作,抱歉http://jsfiddle.net/anschwem/Y4cf6/2/)。任何简化的代码将不胜感激。此外,如果可以将此代码限制为仅过滤某个表,那就太好了,这样我就可以拥有许多表和许多下拉菜单。如果这可以在没有行 ID 的情况下完成,那就更好了。谢谢!我的表/html:
<table>
<tr id="catRow">
<td id="cats">cats</td>
</tr>
<tr id="catRow2">
<td id="cats">cats</td>
</tr>
<tr id="dogRow">
<td id="dogs">dogs</td>
</tr>
<tr id="birdRow">
<td id="birds">birds</td>
</tr>
<tr>
<td id="dogRow2">dogs</td>
</tr>
</table>
<select id="selectFilter">
<option id="sel_All">Select...</option>
<option id="selCats">Cats</option>
<option id="selDogs">Dogs</option>
<option id="selBirds">Birds</option>
</select>
代码:
<script type='text/javascript'>
$(window).load(function(){
$('select').change(function() {
if($('#selectFilter option:selected').attr('id') == "sel_All" || $('#selectFilter option:selected').attr('id') == "sel_All"){$('#catRow').show();$('#catRow2').show();$('#dogRow').show();$('#dogRow2').show();$('#birdRow').show();}
if($('#selectFilter option:selected').attr('id') == "selCats" || $('#selectFilter option:selected').attr('id') == "selCats"){$('#catRow').show();$('#catRow2').show();$('#dogRow').hide();$('#dogRow2').hide();$('#birdRow').hide();}
if($('#selectFilter option:selected').attr('id') == "selDogs" || $('#selectFilter option:selected').attr('id') == "selDogs"){$('#catRow').hide();$('#catRow2').hide();$('#dogRow').show();$('#dogRow2').show();$('#birdRow').hide();}
if($('#selectFilter option:selected').attr('id') == "selBirds" || $('#selectFilter option:selected').attr('id') == "selBirds"){$('#catRow').hide();$('#catRow2').hide();$('#dogRow').hide();$('#dogRow2').hide();$('#birdRow').show();}
</script>