JSFiddle - React, Tailwind, and code Playground
HTML
<select multiple="multiple" name="transports[]" id="dropdown_transports">
<option value="Windows">Windows</option>
<option value="Linux">Linux</option>
<option value="Mac">Mac</option>
</select>
<table id="agents_liste" style="margin-top:40px;">
<tbody>
<tr>
<td>Windows ### Linux</td>
</tr>
<tr>
<td>Qwerty</td>
</tr>
<tr>
<td>Linux ### MAX</td>
</tr>
<tr>
<td>Linux ### Windows ### Mac</td>
</tr>
</tbody>
</table>
JavaScript
$('#dropdown_transports').change(function() {
var filtre_transports = Array();
$('#dropdown_transports').children('option').filter(':selected').each(
function(i) {
filtre_transports.push($(this).text());
}
);
$('#agents_liste tbody tr').show();
$('#agents_liste tbody tr').each(function() {
var transports_matches = true;
var ligne_transports =
$(this).children('td').eq(0).text().split(' ### ');
$.each(filtre_transports, function() {
var filtre = this;
var filtreOk = false;
$.each(ligne_transports, function() {
if (String(filtre) == String(this)) {
filtreOk = true;
return false;
}
});
if (!filtreOk) {
transports_matches = false;
return false;
}
});
$(this).css('display', (transports_matches) ? '' : 'none');
});
});