Dropdown Filter by product or items

I just made a simple front-end page using HTML and CSS. this page has two kinds of products which are a camera and dvr. i want to filter the camera when I select the camera from the dropdown and the same with the dvr. but I don’t know how to do this. I tried to use list.js but didn’t work.

this is my HTML code for the page.
Filter code part

<nav class="product-filter">
        <h1>Security Products</h1>
        <div class="sort">
          <div class="collection-sort">
            <label>Filter by:</label>
            <select id="list" onchange="getSelectedValue()">
              <option selected="selected">Select a product</option>
              <option value="camera">Camera</option>
              <option value="dvr">DVR</option>
            </select>
          </div>
        </div>
    </nav>

Product card code(1st one is the camera. 2nd one is DVR)

      <section class="products">
        <div class="product-card camera">
            <div class="product-image">
                <img src="assets/images/services/hikvision/1.jpg">
                <span id="item-description">CAMERA</span>
            </div>
            <div class="product-info">
                <h5>Hikvision ColorVu Series</h5>
                <h6>$99.99</h6>
            </div>
        </div>
        
        <div class="product-card dvr">
            <div class="product-image">
                <img src="assets/images/services/hikvision/2.jpg">
                <span id="item-description">DVR</span>
            </div>
            <div class="product-info">
                <h5>Hikvision Value Series</h5>
                <h6>$99.99</h6>
            </div>
        </div>
     </section>

Additionally, I have added to get the value from dropdown using JS. it only shows the value in the console.

<script>
        function getSelectedValue() {
            var selectValue = document.getElementById("list").value;
            console.log(selectValue);
        }

    </script>

Source: Ask Javascript Questions

LEAVE A COMMENT