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(' ### ');
$(filtre_transports).each(function() {
var filtre = $(this);
var filtreOk = false;
$(ligne_transports).each(function() {
if (filtre == $(this)) {
filtreOk = true;
return false;
}
});
if (!filtreOk) {
transports_matches = false;
return false;
}
});
$(this).css('display', (transports_matches) ? '' : 'none');
});
});