【发布时间】：2016-12-28 18:18:37
【问题描述】：
我想根据用户从多个选择元素中选择的内容使用 jQuery 隐藏/显示过滤表。
我希望用户能够从 1、2 或 3 个选择元素中选择多个值。因此，也许他们会选择 2 名培训师、1 名新兵和 1 名身份，或者可能只选择 1 名培训师。计划创建一个在用户单击任何选项时将运行的函数。
在我看来，每个选择元素都有一个用户选择的值数组。所以我需要遍历每个数组并将其与该特定列中的文本进行比较。如果选项仅来自 1 个选择元素，那就很容易了。但由于它可能是 1、2 或全部 3，我很难理解它。
任何帮助将不胜感激。
表：
<table id="reportsTable">
<thead>
<th>Report Number</th>
<th>Date</th>
<th>Name</th>
<th>Trainer</th>
<th>Status</th>
</thead>
<tbody>
<tr>
<td>12345-1</td>
<td>05/01/2011</td>
<td>First Recruit</td>
<td>First Trainer</td>
<td>Complete</td>
</tr>
<tr>
<td>12345-2</td>
<td>05/02/2011</td>
<td>First Recruit</td>
<td>Second Trainer</td>
<td>In Progress</td>
</tr>
<tr>
<td>54321-1</td>
<td>05/03/2011</td>
<td>Second Recruit</td>
<td>First Trainer</td>
<td>Created</td>
</tr>
</tbody>
</table>
选择：
<select multiple="multiple" name="trainerFilter">
<option value="firsttrainer">First Trainer</option>
<option value="secondtrainer">Second Trainer</option>
</select>
<select multiple="multiple" name="recruitFilter">
<option value="firstrecruit">First Recruit</option>
<option value="secondrecruit">Second Recruit</option>
</select>
<select multiple="multiple" name="statusFilter">
<option value="created">Created</option>
<option value="inprogress">In Progress</option>
<option value="complete">Complete</option>
</select>
看起来我无法在 8 小时内发布我的问题的答案，但感谢@Spencer Ruport，这是我想出的。由于必须考虑所有可能的条目，它最终比我预期的要复杂得多。用户可以从第一个选择元素中选择一些东西，从第二个中选择什么，从第三个中选择 2。或者，也许用户没有从第一个中选择任何东西，而从第二个中没有选择 2。对于任何给定的输入，可能需要应用超过 6 个过滤器。
我确信有比这更好的方法，而且看起来 @Alison 可能已链接到一个，但它确实有效。
function filterReports() {
$('.report').hide(); //Set all rows to hidden.
trainerVals = $('#trainerFilter').val();
recruitVals = $('#recruitFilter').val();
statusVals = $('#statusFilter').val();
if (trainerVals) { //Check if any trainers are selected.
$.each(trainerVals, function(index, trainer) {
filtered = false;
classString = '';
classString += '.' + trainer;
if (recruitVals) { //Check if trainers and recruits are selected.
$.each(recruitVals, function(index, recruit) {
filtered = false;
secondString = '';
secondString = classString + '.' + recruit; //Concat to a new string so we keep the old one intact.
if (statusVals) { //Check if trainers, recruits and statuses are selected.
$.each(statusVals, function(index, status) {
filtered = false;
finalString = '';
finalString += secondString + '.' + status; //Again concat to a new string.
$(finalString).show();
filtered = true; //By setting filtered to true, we only run the show once.
});
}
if (!filtered) { //If trainers and recruits are selected, but not a status, we need to apply that filter.
$(secondString).show();
filtered = true;
}
});
}
if (!filtered && statusVals) { //If only trainers and statuses are selected, go through those.
$.each(statusVals, function(index, status) {
filtered = false;
finalString = '';
finalString += classString + '.' + status;
$(finalString).show();
filtered = true;
});
}
if (!filtered) { //If only trainers are selected, apply that filter.
$(classString).show();
filtered = true;
}
});
}
if (!filtered && recruitVals) { //If trainers are not selected, by recruits are, run through the recruits.
$.each(recruitVals, function(index, recruit) {
classString = '';
classString += '.' + recruit;
if (statusVals) { //Check if recruits and statuses are selected
$.each(statusVals, function(index, status) {
finalString = '';
finalString += classString + '.' + status;
$(finalString).show();
filtered = true;
});
}
if (!filtered) { //If only recruits are selected, apply that filter.
$(classString).show();
filtered = true;
}
});
}
if (!filtered && statusVals) { //If both trainers and recruits are not selected, but statuses are, run through those.
$.each(statusVals, function(index, status) {
classString = '';
classString += '.' + status;
$(classString).show();
filtered = true;
});
}
if (!filtered) {
//No filters selected.
}
$("tr").removeClass("even"); //Remove current zebra striping.
$("tr:visible:even").addClass("even"); //Add zebra striping only for rows that are visible.
}
【问题讨论】：
标签： jquery html filter html-table