How to show only data-subtext matching with a selected option value

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?

CodePudding user response：

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() 
});