I am currently working on a filtering tool that utilizes a select element. The functionality I am aiming for is that when an option is selected from the drop-down menu, only the corresponding div below should be displayed while hiding the others.
To achieve this, I am using the select value as the class name of the targeted div. For instance, selecting "Shirts" would assign the class item-shirts to the div containing shirt-related content.
I have managed to successfully hide all other divs that do not match the selected item's class. However, I am struggling with restoring visibility to all divs when another selection is made. Any assistance on resolving this issue would be greatly appreciated!
Below is a snippet of my HTML code:
<select>
<option value="item-shirts">Shirts</option>
<option value="item-shoes">Shoes</option>
<option value="item-pants">Pants</option>
</select>
<div class="item-section item-shirt></div>
<div class="item-section item-shoes></div>
<div class="item-section item-pants></div>
And here is the jQuery script I am using:
$('select').on("change", function() {
var value = $('select').val();
if($('.item-section').hasClass(value)) {
$('.item-section.'+value).siblings().hide();
} else {
$('.item-section.'+value).siblings().show();
}