我有两个选择框。其中包含姓名和主题…并且还有一个3列的表。它们是name
, subject
, marks
。我想根据这两个选择框的值来过滤那些表的值。
my code
<select id="first">
<option>Show all</option>
<option>raja</option>
<option>john</option>
</select>
<select id="second">
<option>Show all</option>
<option>english</option>
<option>tamil</option>
</select>
<table border="1" id="test">
<thead>
<th>Name</th>
<th>subject</th>
<th>mark</th>
</thead>
<tbody>
<tr>
<td>raja</td>
<td>english</td>
<td>85</td>
</tr>
<tr>
<td>raja</td>
<td>tamil</td>
<td>80</td>
</tr>
<tr>
<td>john</td>
<td>english</td>
<td>95</td>
</tr>
<tr>
<td>john</td>
<td>tamil</td>
<td>90</td>
</tr>
</tbody>
</table>
jQuery $('#first').change(function() {
var val= $(this).val();
$('#test').each(function() {
if($('#test tr > td:contains('+val+')'))
{
$(this).parent().show();
}
else
{
$(this).parent().hide();
}
});
});
朋友们检查一下这段代码演示 js
var str=""
$('#first, #second').on('change',function(){
var rows = $('#test tr:not(:first)');
rows.hide();
var sub = $("#second").val();
var select= $('#first').val();
if (select == "Show all" && sub == "Show all"){
rows.show();
}
else if (sub == "Show all"){
if (select != "Show all") str=":contains('" + select + "')"
else str=""
}else if (select == "Show all"){
if (sub != "Show all") str=":contains('" + sub + "')"
else str=""
}else{
str=":contains('" + sub + "'):contains('" + select + "')"
}
rows.filter(str).show();
console.log(sub, select,str);
});
检查Demo Fiddle
$('#first').on('change',function(){
var rows = $('#test tr:not(:first)');
var select = $(this).val();
rows.hide();
rows.filter(":contains('" + select + "')").show();
});
$('#second').on('change',function(){
var rows = $('#test tr:not(:first)');
var select = $(this).val();
rows.hide();
rows.filter(":contains('" + select + "')").show();
});