Tengo un menú desplegable que se parece a lo siguiente:
<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>¿Cómo muestro solo los productos que coinciden con el subtexto de datos con su valor de categoría?
Necesita ocultarlo y mostrarlo en función del valor seleccionado
$('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() });