Filter products by category

by Ayyappan Sakthivadivel

HTML

<div class="product-item"
     data-category="Electronics"
     data-name="iPhone">
</div>

<div class="product-item"
     data-category="Electronics"
     data-name="Samsung TV">
</div>

<div class="product-item"
     data-category="Furniture"
     data-name="Sofa">
</div>

JavaScript

const items = document.querySelectorAll(".product-item");

category.addEventListener("change", function () {

    product.innerHTML = '<option>Select Product</option>';

    items.forEach(item => {

        if(item.dataset.category === this.value){

            product.innerHTML += `
                <option value="${item.dataset.name}">
                    ${item.dataset.name}
                </option>
            `;

        }

    });

});