使用jQuery筛选具有三个选择输入的表格 [英] Filter table with three select inputs using jQuery
问题描述
我有3个< select> ，我想从中过滤一个表，并同时使用它们的选项互相过滤.我将首先向您显示代码:
I have 3 <select> from which I would like to filter a table and at the same time filter each other using their options. I will first show you the code:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div>
Select A type
<select id="A">
<option>Toate</option>
<option>A1</option>
<option>A2</option>
<option>A3</option>
</select>
</div>
<div>
Select B type
<select id="B">
<option>Toate</option>
<option>B1</option>
<option>B2</option>
<option>B3</option>
<option>B4</option>
<option>B5</option>
<option>B6</option>
</select>
</div>
<div>
Select C type
<select id="C">
<option>Toate</option>
<option>C1</option>
<option>C2</option>
<option>C3</option>
<option>C4</option>
<option>C5</option>
<option>C6</option>
<option>C7</option>
<option>C8</option>
<option>C9</option>
<option>C10</option>
</select>
</div>
<br/>
<table id="X">
<thead>
</thead>
<tbody>
<tr>
<td>A1,B1,C1</td>
</tr>
<tr>
<td>A1,B1,C2</td>
</tr>
<tr>
<td>A1,B1,C3</td>
</tr>
<tr>
<td>A1,B2,C4</td>
</tr>
<tr>
<td>A1,B2,C5</td>
</tr>
<tr>
<td>A1,B3,C6</td>
</tr>
<tr>
<td>A2,B4,C7</td>
</tr>
<tr>
<td>A2,B5,C8</td>
</tr>
<tr>
<td>A2,B5,C9</td>
</tr>
<tr>
<td>A3,B6,C10</td>
</tr>
</tbody>
</table>
</body>
</html>
到目前为止，我设法完成的脚本是:
and the script I managed to pull off so far is this:
$('#A,#B,#C').on('change', function() {
$('table tbody tr td').css("display", "none");
var optiuneaSelectata = this.value;
$('table tbody tr td:contains("' + optiuneaSelectata + '")').css("display", "table-cell");
})
如果选择例如A1，则要在表中显示包含A1的所有td，如果选择A2，则要显示包含A2的所有td，依此类推.到目前为止，我的代码已经做到了.问题是我也想限制其他选择.例如，如果我选择C10，则在第一个选择中，我只能选择A3，而在第二个选择中，则应该选择B6.
If I choose for example A1, I want to show in the table all the td that contain A1, if I choose A2 show all the td that contain A2 and so on. My code does just that so far. The problem is that I want to restrict the other selects too. For example if I choose C10, in the first select I should only be able to choose A3 and in the second one B6.
推荐答案
您可以使用以下代码.它具有帮助器功能，该功能将基于3个选择框中的3个选择值来构建CSS选择器.该函数可以接受参数，在这种情况下，可以为一个选择框设置例外.然后，CSS选择器将使用指定的值，而不是在该特定选择框中选择的值.
You could use the following code. It has a helper function which will build a CSS selector based on the 3 selected values in the 3 select boxes. The function can accept parameters in which case an exception can be made for one select box. The CSS selector will then use a specified value instead of the selected value in that particular select box.
该函数将应用该CSS选择器并返回匹配的行.
The function will apply that CSS selector and return the rows that match.
点击处理程序将首先使用上面的函数来仅显示表中与三个选定值匹配的行.然后它将再次使用上述帮助器功能，检查选择框中的哪些值可以与其他两个选择的值组合以找到至少一行:
The click handler will first use the above function to show only the rows in the table that match the three selected values. Then it will check which values in a select box can be combined with the two other selected values to find at least one row, again using the above helper function:
// Helper function: returns rows that meet the condition in the 3
// select boxes. The optional arguments can specify one of the select boxes
// and which value to use instead of the selected value in that select box
function getRows(override, value) {
var filter = "table tbody tr td";
$("#A,#B,#C").each(function() {
var test = this === override ? value : $(this).val();
if (test !== "Toate") filter += ":contains(" + test + ")";
});
return $(filter).parent();
}
$('#A,#B,#C').on('change', function() {
$('table tbody tr').hide();
getRows().show();
$('#A,#B,#C').each(function (i, select) {
$('option', this).each(function () {
$(this).toggle(getRows(select, $(this).text()).length > 0);
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Select A type
<select id="A">
<option>Toate</option>
<option>A1</option>
<option>A2</option>
<option>A3</option>
</select>
</div>
<div>
Select B type
<select id="B">
<option>Toate</option>
<option>B1</option>
<option>B2</option>
<option>B3</option>
<option>B4</option>
<option>B5</option>
<option>B6</option>
</select>
</div>
<div>
Select C type
<select id="C">
<option>Toate</option>
<option>C1</option>
<option>C2</option>
<option>C3</option>
<option>C4</option>
<option>C5</option>
<option>C6</option>
<option>C7</option>
<option>C8</option>
<option>C9</option>
<option>C10</option>
</select>
</div>
<br/>
<table id="X">
<thead>
</thead>
<tbody>
<tr>
<td>A1,B1,C1</td>
</tr>
<tr>
<td>A1,B1,C2</td>
</tr>
<tr>
<td>A1,B1,C3</td>
</tr>
<tr>
<td>A1,B2,C4</td>
</tr>
<tr>
<td>A1,B2,C5</td>
</tr>
<tr>
<td>A1,B3,C6</td>
</tr>
<tr>
<td>A2,B4,C7</td>
</tr>
<tr>
<td>A2,B5,C8</td>
</tr>
<tr>
<td>A2,B5,C9</td>
</tr>
<tr>
<td>A3,B6,C10</td>
</tr>
</tbody>
</table>这篇关于使用jQuery筛选具有三个选择输入的表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
