如何僅顯示與所選選項值匹配的數據潛文本 - jQuery

Question

我有一個如下所示的下拉菜單：

<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>

如何僅顯示匹配數據潛文本及其類別值的產品？

Answer 1

您需要隱藏並根據所選值顯示它

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