Menu Close

How To Filter Elements With Jquery Via Select/Dropdown

Jquery dropdown filter

Here, we are using select input or dropdown to filter the elements. It shows only the same value which we entered in the select option. Follow the below example to create this.

Example:

Create a html file and add the below snippet to your file. 

<!DOCTYPE html>
<html> 
<head>
    <title>How To Filter Elements With Jquery Via Select/Dropdown</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    
</head>
<body>
<div class="container filter-elements">
    <div class="filter-cat row">
        <div class="col col-md-3 col-xs-6">
            <select class="form-control">
                <option value="cat-all">Show all</option>
                <option value="cat-red">Red</option>
                <option value="cat-green">Green</option>
                <option value="cat-blue">Blue</option>
            </select>
        </div>
    </div>
    <div class="row filter-cat-results">
        <div class="col col-md-3 col-xs-6 fil-cat text-center" data-cat="cat-red">Level 1</div>
        <div class="col col-md-3 col-xs-6 fil-cat text-center" data-cat="cat-red">Level 2</div>
        <div class="col col-md-3 col-xs-6 fil-cat text-center" data-cat="cat-blue">Level 3</div>
        <div class="col col-md-3 col-xs-6 fil-cat text-center" data-cat="cat-green">Level 4</div>
        <div class="col col-md-3 col-xs-6 fil-cat text-center" data-cat="cat-red">Level 5</div>
        <div class="col col-md-3 col-xs-6 fil-cat text-center" data-cat="cat-blue">Level 6</div>
        <div class="col col-md-3 col-xs-6 fil-cat text-center" data-cat="cat-blue">Level 7</div>
        <div class="col col-md-3 col-xs-6 fil-cat text-center" data-cat="cat-green">Level 8</div>
        <div class="col col-md-3 col-xs-6 fil-cat text-center" data-cat="cat-blue">Level 9</div>
        <div class="col col-md-3 col-xs-6 fil-cat text-center" data-cat="cat-green">Level 10</div>
        <div class="col col-md-3 col-xs-6 fil-cat text-center" data-cat="cat-red">Level 11</div>
        <div class="col col-md-3 col-xs-6 fil-cat text-center" data-cat="cat-green">Level 12</div>
    </div>
</div> 
</body>  
    <script>         
        var filterActive;
        function filterCategory(category) {
            if (filterActive != category) {
                $('.filter-cat-results .fil-cat').removeClass('active');
                $('.filter-cat-results .fil-cat')
                    .filter('[data-cat="' + category + '"]')
                    .addClass('active');
                filterActive = category;
            }
        }

        $('.fil-cat').addClass('active');
        $('.filter-elements select').change(function() {
            if ($(this).val() == 'cat-all') {
                $('.filter-cat-results .fil-cat').addClass('active');
                filterActive = 'cat-all';
            } else {
                filterCategory($(this).val());
            }
        });
    </script>
</html>
 

CSS:

Create an external stylesheet and link it to your html file to view the better design.

body {
    margin:50px;
    font-family: Arial, sans-serif;
    padding: 50px;
    background: #fafafa;
}

.filter-cat {
    margin: 2em 0;
}

.fil-cat {
    color: #fff;
    padding: 2em;
    border: 5px solid #fff;
}

.fil-cat[data-cat='cat-red'] {
    background: #ff4136;
}
.fil-cat[data-cat='cat-green'] {
    background: #2ecc40;
}
.fil-cat[data-cat='cat-blue'] {
    background: #0074d9;
}

.filter-cat-results .fil-cat {
    opacity: 0;
    display: none;
    
    &.active {
        opacity: 1;
        display: block;
	    -webkit-animation: fadeIn 0.5s ease forwards;
	    animation: fadeIn 0.5s ease forwards;
    }
}

@-webkit-keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
} 
Posted in HTML, jQuery

You can also read...