JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<select id="type">
    <option value=""> Select Option... </option>
    <option value="binder"> Binders </option>
    <option value="boxfile"> Boxfiles </option>
    <option value="banner"> Banners </option>
    <option value="sticker"> Stickers </option>
</select>

<select id="subCategory">
    <option value=""> Select Option... </option>
    <option value="a4"> A4 </option>
    <option value="a3"> A3 </option>
    <option value="a5"> A5 </option>
    <option value="a2"> A2 </option>
</select>

<div class="product-list">
    <div class="product" data-type="binder" data-sub="a4">
        <span>Binder (A4)</span>
    </div>
     <div class="product" data-type="binder" data-sub="a3">
        <span>Binder (A3)</span>
    </div>
     <div class="product" data-type="banner" data-sub="a4">
        <span>Banner (A4)</span>
    </div>
     <div class="product" data-type="sticker" data-sub="a2">
        <span>Sticker (A2)</span>
    </div>
    <div class="product" data-type="sticker" data-sub="a5">
        <span>Sticker (A5)</span>
    </div>
    <div class="product" data-type="binder" data-sub="a2">
        <span>Binder (A2)</span>
    </div>
</div>

CSS

div {
    box-sizing:border-box;
}

.product-list {
    width:100%;    
}

.product-list .product {
    width:32%;
    margin-right:2%;
    float:left;
    border:1px black solid;
    text-align:center;
    margin-top:1em;
    padding:3em 1em;  
}

.product-list .product:nth-child(3n) {
    margin-right:0;
}

JavaScript

// document ready
$(function() {   
    
    // on change
    $(document).on('change', '#type, #subCategory', function() {
        
        // target products to hide and show
        var products = $('.product');        
        // get value of selected options
        var selected = this.value;
        
        if(selected !== '') {
            products.hide(); // hide all when search starts                      
            $('[data-type="'+ selected +'"], [data-sub="'+ selected +'"]').fadeIn();  // show only the selected options           
        } else {
            products.fadeIn();
        }          

    });
});