What is the best way to implement two dropdown filters using Bootstrap 4 in an HTML document?

I am currently designing a website with a 'projects' page where clients can view all completed projects. The client now wants to add two filters: one for the 'type of service' and one for the 'type of structure'. I attempted to use a dropdown list for this, but it seems that only the 'a element' is working and not the 'data-list' which I am currently using. However, the issue with the 'data-list' attribute is that it only functions for one filter.

I am struggling to find a solution to this problem...but there has to be a way, right?

Thank you in advance! Regards

javascriptjqueryhtmlcssbootstrap-4

Answer №1

This function compares class names with the values in the data-list attribute of both select boxes. By using logical operators, you can choose between exclusive or inclusive conditions.

$(document).ready(function(){

$('select').on('change',function(){
var struct=$('.structure').find(':selected').attr('data-list');
var serv=$('.service').find(':selected').attr('data-list');
$('.project').each(function() {
var classList = $(this).attr('class').split(/\s+/);
//console.log(classList);
if(struct==='all' && serv==='all') {
$('.project').show();
} else if(struct==='all' || serv==='all') {
$(this).toggle((classList.includes(struct) || classList.includes(serv)));
} else{
$(this).toggle((classList.includes(struct) && classList.includes(serv)));
}
});

});
});
img{
width:150px;
height:150px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="project" class="structure">
    <option data-list="all">--Filter by Structure--</option>
    <option data-list="hotel">Hotels</option>
    <option data-list="house">Houses</option>
    <option data-list="office">Office</option>
    <option data-list="theater">Theaters</option>
</select>
<select name="service" class="service">
    <option data-list="all">--Filter by Service--</option>
    <option data-list="Deco">Deco</option>
    <option data-list="Design">Design</option>
    <option data-list="Construction">Construction</option>
    <option data-list="Lighting">Lighting</option>
</select>
<div class="container-fluid">
<div class="col-md-12">
<div class="row">

<div class="col-md-3 project hotel Construction">
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/c/ce/H%C3%B4tel_du_Lac_Tunis.jpg">

</div>

<div class="col-md-3 project house Construction">
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/b/b0/Teremok_%28Talashkino%3B_2013-11-10%29_02.JPG">

</div>
<div class="col-md-3 project theater Lighting">
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/7/71/Palais_Garnier._December_5%2C_2010.jpg">
</div>
<div class="col-md-3 project office Lighting">
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/London_MMB_%C2%BB093_15_Westferry_Circus.jpg/640px-London_MMB_%C2%BB093_15_Westferry_Circus.jpg">
</div>
<div class="col-md-3 project house Deco">
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/8/85/The_16_house_on_the_Beautiful_Street_from_Bucharest_%28Romania%29_1.jpg">

</div>
</div>
<div class="row">
<div class="col-md-3 project hotel Design">
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/0/07/Toru%C5%84%2C_Hotel_Polonia.jpg">
</div>
</div>
</div>
</div>

If you need a reliable plugin, I recommend MixItUp or iSotope.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to postpone the utilization of data in Vue until after retrieving the value from the database

I am facing an issue where I need to compare a string obtained from Firebase in document.check1 with specific strings (hardcoded in the function below) and display content accordingly. Currently, I know how to trigger this comparison on button click, but I ...

javascriptfirebasevue.jsgoogle-cloud-firestore

emphasize links and images that share the same properties when hovered over

I am looking to establish a relationship between two lists and multiple images using mouseover events on any item. The classes for photographers, styles, and images can be selected dynamically based on the hover action. Is there a way to detect the class o ...

jqueryjquery-selectors

What is the reason this switch statement functions only with one case?

Why is the switch statement not functioning properly? It seems to correctly identify the values and match them with the appropriate case, but it only works when there is a single case remaining. If there are multiple cases to choose from, nothing happens. ...

javascripthtmlfunctionswitch-statementlet

Tips for storing data from a table using a button

I have implemented a data table to display information from a database. I am looking for a way to save user information whenever they export data in Excel, CSV, or PDF format from the table. I have already created a function to handle saving user data, but ...

javascriptphpajaxcodeigniter

The node server is encountering a null value from the HTML input

Currently, I am delving into the world of serving a front-end application with Node.js and familiarizing myself with the basics of Express. However, I've encountered a puzzling issue where the JavaScript linked to my HTML file via an SRC attribute is ...

javascripthtmlnode.jsexpressexpress-router

Performing an Ajax request in JavaScript

I've encountered an issue with my jQuery ajax call. It was working perfectly fine when placed in a jQuery file. Here's the code snippet: var request = $.ajax({ url: "kscript.jsp", type: "POST", data: {st:start, sp:stop}, dataType ...

javascriptjqueryajax

What is the best way to invoke a JavaScript function that utilizes the jQuery library?

Recently I came across this interesting function: function squarifyMe(element) { squareItUp() window.onresize = function(element) { squareItUp(); } function squareItUp() { $(element).height($(element).width()); } } and its usage is as ...

javascriptjquery

Error Uploading File - Functioning in Postman but not on website interface

I'm currently pursuing the full stack certification on devchallenges.io and tackling the authentication app challenge. So far, I've successfully implemented the login and register functionality, as well as fetching the logged-in user's infor ...

javascriptnode.jsreactjsexpressredux

What is the best way to activate a modal in the parent component when a button is clicked in the child component?

Currently I have the following setup: panelHeader.vue (which is a child component) index.vue (the parent component where my main list view is) panelHeader.vue <template> <v-row> <div class="panelHeader"> ...

javascriptvue.jsvuejs2vue-componentvuetify.js

What is the best method to smoothly navigate to a specific id on a webpage after conducting a search using

I want to implement a jQuery function that allows me to scroll down to an id containing search results. The script as a whole, minus the JS, is functioning properly. I just need assistance in creating a method to search for specific id values. Below is my ...

javascriptphpjquery

What is the best method for invoking ajax requests from a service in AngularJS?

I am working on an Employee controller that includes properties such as Id, Name, and Specification. I have created an Employee service which makes an ajax call to retrieve a list of employees. However, every time I make the call, I receive an empty resp ...

javascriptangularjsajaxpromiseangular-promise

Is there an easy method to verify if the local storage is devoid of any data?

Query is named aptly; seeking to verify in a conditional statement. ...

javascripthtmllocal-storage

What are the time-saving benefits of utilizing semantic X/HTML in CSS development?

Exploring the Time-Saving Power of Semantic X/HTML Markup - Streamlining CSS writing for websites Adapting to future design changes from clients with ease Avoiding the time-consuming nature of Table-based layouts in all scenarios Today, I have the task ...

cssxhtmlweb-standardssemantic-markup

The CSS rotation effect causes the element to spin and twirl

I've been struggling once again to grasp the concept of CSS animations, particularly the rotate animation. I'm trying to create an effect where an image rotates back and forth on hover, but for some reason it only starts rotating after shifting t ...

htmlcssanimation

Exploring the best practices for rendering nested array elements in React.js

Is there a way to display only one URL from a nested array in React using CardMedia component? https://i.sstatic.net/K6JDz.png {props.currentTodos.map((currentTodo) => ( <CardMedia className={cl ...

javascriptarraysreactjs

Issues with CreateJS chained animations failing to reach their intended target positions

Currently, I am tackling a project that involves using Three.js and CreateJS. However, I have encountered an issue with the animations when trying to move the same object multiple times. The initial animation fails to reach the target position, causing sub ...

javascriptthree.jstweencreate.js

Is it possible to create a touch menu on an iPhone by utilizing basic markup and implementing the :hover-state feature?

After finally launching my WordPress blog, I spent a significant amount of time developing the theme. When I attempted to view the site on my iPhone for the first time, I was surprised by what I saw. Initially, I thought creating a touch menu would be as s ...

htmlcsshovertouchmobile-safari

"React-pdf throws an error stating that `Buffer` is not defined

I am encountering an issue while trying to utilize the react-pdf library to create pdf files. Upon attempting this, I am facing the following error: BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no ...

javascriptreactjsnpmwebpack

How do I fix the scroll top issue caused by Jquery fadeIn?

Currently facing an issue with the jQuery fadeIn (or fadeOut) method. I have constructed an article rotator which is functioning properly. However, a problem arises when the page is scrolled to the bottom and the articles rotate. The fadeIn (or fadeOut) me ...

jqueryajaxfadeinfadeoutimage-rotation

What is the best way to differentiate between words enclosed in quotation marks using colors?

Working on my shop, I've added a section for "Colors available", but now I want to color different words with different colors using Javascript, CSS, or HTML. <button onclick="getColors()">Colors Available</button> <script> ...

javascripthtmlcss