I've been searching for a solution to my simple dropdown issue, but haven't had any luck in the forums. This is the code for the dropdown:
<select id ="category_faq">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
</select>
The corresponding divs are:
<div class="views-row-1"></div>
<div class="views-row-2"></div>
<div class="views-row-3"></div>
My goal is for selecting each item in the dropdown to show only the relevant div and hide the others.
Here's the jQuery script I'm using:
jQuery(document).ready(function($) {
$('#category_faq').on('change',function() {
if(this.value=='1')
{
$('.views-row-1').show();
}
else if (this.value=='2')
{
$(".views-row-1").hide();
$(".views-row-2").show();
$(".views-row-3").hide();
}
else
{
$(".views-row-1").hide();
$(".views-row-2").hide();
$(".views-row-3").show();
}
});
});
Unfortunately, this script doesn't seem to be working. Can anyone help me identify where I may have gone wrong?