我有一张表,我想过滤未从多选中选择的行。
<table id="myTable">
<tr>
<td>Working Visa</td>
<td>Blond</td>
</tr>
<tr>
<td>Student Visa</td>
<td>Brown</td>
</tr>
</table>
我想要当我从选择项之一中选择(或取消选择)值时,它会过滤未选择值所在的行。
<select class="select" multiple>
<option value="Working Visa"></option>
<option value="Student Visa"></option>
</select>
<select class="select" multiple>
<option value="Blond"></option>
<option value="Brown"></option>
</select>
我到目前为止所做的
$("select.select").change( function() {
$(this).each(function() {
var valeurs = $(this).val();
//console.log(valeurs);
$("#MyTable tr").show();
$("td").not("td."+valeurs).parent("tr").hide();
});
});
当我单击“工作签证”时,我只希望显示带有“工作签证”的行。但是,如果我也单击“金发”,则将显示“工作签证和金发”行。
确定select
已选择选项的元素数:
var num= $('select.select').has('option:selected').length;
隐藏所有行:
$('#myTable tr').hide();
仅显示td
与所选选项匹配的s等于步骤1中的数字的行。
$('#myTable tr').each(function() {
if(num === $(this).find('td').filter(function() {
return $('option:selected:contains("'+$(this).text()+'")').length;
}).length
) {
$(this).show();
}
});
即使您添加其他select
元素和表列,这也将起作用。
$('select.select').change(function() {
var num= $('select.select').has('option:selected').length;
$('#myTable tr').hide();
$('#myTable tr').each(function() {
if(num === $(this).find('td').filter(function() {
return $('option:selected:contains("'+$(this).text()+'")').length;
}).length
) {
$(this).show();
}
});
});
#myTable tr {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select" multiple>
<option value="Working Visa">Working Visa</option>
<option value="Student Visa">Student Visa</option>
</select>
<select class="select" multiple size="5">
<option value="Blond">Blond</option>
<option value="Black">Black</option>
<option value="Brown">Brown</option>
<option value="Auburn">Auburn</option>
</select>
<table id="myTable">
<tr>
<td>Working Visa</td>
<td>Blond</td>
</tr>
<tr>
<td>Working Visa</td>
<td>Black</td>
</tr>
<tr>
<td>Student Visa</td>
<td>Brown</td>
</tr>
<tr>
<td>Student Visa</td>
<td>Auburn</td>
</tr>
</table>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句