I am currently working on a project for one of my college courses, which involves creating a dropdown list filter using pure JavaScript to filter a grid of images in HTML/CSS. The main challenge I am facing is that this filter needs to be able to work with three dropdown lists simultaneously. For instance, if I select "nature" and "people," it should display the grids corresponding to those categories, and when I choose "category," all the images should appear. Any help or guidance on how to achieve this would be greatly appreciated.
var element = document.getElementById("category1");
element.addEventListener("change", function() {
var option = element.options[element.selectedIndex].text;
var photos = document.getElementsByClassName("photo");
for (var i = 0; i < photos.length; ++i) {
if (!photos[i].classList.contains(option)) {
photos[i].style.display = "none";
} else {
photos[i].style.display = 'block';
}
}
});<div class="filter">
<select id="category1">
<option value="">category</option>
<option value="people">people</option>
<option value="nature">nature</option>
<option value="landscapes">landscapes</option>
</select>
<select id="category2">
<option value="">category</option>
<option value="people">people</option>
<option value="nature">nature</option>
<option value="landscapes">landscapes</option>
</select>
<select id="category3">
<option value="">category</option>
<option value="people">people</option>
<option value="nature">nature</option>
<option value="landscapes">landscapes</option>
</select>
</div>
<div class="gallery">
<div class="photo nature people" style="background-image: url(https://picsum.photos/1000/1000?random=1);"></div>
<div class="photo landscapes" style="background-image: url(https://picsum.photos/1000/1000?random=2);"></div>
<div class="photo nature" style="background-image: url(https://picsum.photos/1000/1000?random=3);"></div>
<div class="photo people landscapes" style="background-image: url(https://picsum.photos/1000/1000?random=4);"></div>
<div class="photo people" style="background-image: url(https://picsum.photos/1000/1000?random=5);"></div>
<div class="photo nature landscapes" style="background-image: url(https://picsum.photos/1000/1000?random=6);"></div>
<div class="photo people" style="background-image: url(https://picsum.photos/1000/1000?random=7);"></div>
<div class="photo natureza landscapes people" style="background-image: url(https://picsum.photos/1000/1000?random=8);"></div>
<div class="photo natureza landscapes people" style="background-image: url(https://picsum.photos/1000/1000?random=9);"></div>
<div class="photo nature people" style="background-image: url(https://picsum.photos/1000/1000?random=10);"></div>
<div class="photo landscapes" style="background-image: url(https://picsum.photos/1000/1000?random=11);"></div>
<div class="photo landscapes nature" style="background-image: url(https://picsum.photos/1000/1000?random=12);"></div>
</div>