I have a dropdown menu that looks like the following:
<select name="category" id="category">
<option value="category-1">category-1</option>
<option value="category-2">category-3</option>
<option value="category-3">category-2</option>
</select>
<select name="product" id="product">
<option data-subtext="category-1">product</option>
<option data-subtext="category-1">product</option>
<option data-subtext="category-2">product</option>
<option data-subtext="category-2">product</option>
<option data-subtext="category-3">product</option>
<option data-subtext="category-3">product</option>
</select>
how do I show only products matching data-subtext with its category value?
You need the hide and show it based on the selected value
$('select[name=category]').on('change', function (event) {
let selectedValue;
selectedValue = $(this).find('option:selected').text();
$('select[name=product] option').filter(function () {
if ($(this).attr('data-subtext') !== selectedValue) {
return true;
} else {
$(this).show();
this.selected = true;
}
}).hide()
});