JSFiddle - React, Tailwind, and code Playground
HTML
<select class="filter">
<option value="">None</option>
<option value="a">wood</option>
</select>
<select class="filter">
<option value="">None</option>
<option value="1">blue</option>
<option value="2">green</option>
<option value="2">red</option>
</select>
<table>
<tbody>
<tr>
<td>Wood comes from trees</td>
<td>11</td>
<td>blue</td>
</tr>
<tr>
<td>Some wood is hard</td>
<td>512</td>
<td>green</td>
</tr>
<tr>
<td>Some people like woodwork</td>
<td>51</td>
<td>red</td>
</tr>
<tr>
<td>Some wood is green</td>
<td>12</td>
<td>blue</td>
</tr>
</tbody>
</table>
CSS
table {
margin-top:30px;
}
td {
padding:5px;
}
tr {
background-color:#EEE;
}
JavaScript
$(document).ready(function () {
$('.filter').change(function () {
var values = [];
$('.filter option:selected').each(function () {
if ($(this).val() != "") values.push($(this).text());
});
filter('table > tbody > tr', values);
});
function filter(selector, values) {
$(selector).each(function () {
var sel = $(this);
var tokens = sel.text().split('\n');
var toknesObj = [], i;
for(i=0;i<tokens.length;i++){
toknesObj.push( {text:tokens[i].trim(), found:false});
}
var show = false;
console.log(values);
$.each(values, function (i, val) {
for(i=0;i<toknesObj.length;i++){
if (!toknesObj[i].found && toknesObj[i].text.search(new RegExp("\\b"+val+"\\b")) >= 0) {
toknesObj[i].found = true;
}
}
});
var count = 0;
$.each(toknesObj, function (i, val) {
if (val.found){
count+=1;
}
});
show = (count === values.length);
show ? sel.show() : sel.hide();
});
}
});