JSFiddle - React, Tailwind, and code Playground

by AliReza Moazami

HTML

<select>
    <option value="all">نمایش همه موارد</option>
    <option value="sefid">سفید</option>
    <option value="maye">مایع</option>
    <option value="khoraki">خوراکی</option>
</select>
<table>
    <tr class="sefid maye khoraki"><td>شیر پاستوریزه</td></tr>
    <tr class="sefid"><td>گچ</td></tr>
    <tr class="khoraki"><td>پرتقال</td></tr>
    <tr class="maye khoraki"><td>شیرکاکائو</td></tr>
    <tr class="sefid khoraki"><td>برنج</td></tr>
    <tr class="khoraki"><td>خرما</td></tr>
</table>

JavaScript

$("select").change(function(){
    var v = this.value;
    $("tr").show();
    if("all"==v)
        return;
    $("tr").each(function(){
        if(!$(this).hasClass(v))
            $(this).hide();
    });
});