javascript - 过滤器必须显示默认组

Question

我这里有一个 HTML 选择表单，用于显示组和类别。当我打开页面时，它会显示每个类别的所有内容，我想要做的就是打开页面时仅显示第 1 组的内容。

这是 HTML:

        <span class="select_label">View Content: </span>
        <select id="content_select">
            <option value="ALL">Choose category</option>
            <optgroup label="Group 1">
                <option value="cat1" class="optionGroup">cat1</option>
            </optgroup>
            <optgroup label="Group 2">
                <option value="cat1" class="optionGroup">cat1</option>
                <option value="cat2" class="optionGroup">cat2</option>
                <option value="cat3" class="optionGroup">cat3</option>
            </optgroup>
            <optgroup label="Group 3">
                <option value="cat1" class="optionGroup">cat1</option>
                <option value="cat2" class="optionGroup">cat2</option>
                <option value="cat3" class="optionGroup">cat3</option>
            </optgroup>
            <optgroup label="Group 4">
                <option value="cat1" class="optionGroup">cat1</option>
                <option value="cat2" class="optionGroup">cat2</option>
                <option value="cat3" class="optionGroup">cat3</option>
            </optgroup>
        </select>

我有这个管理过滤的脚本:

<script>
    // FILTER

    $('#content_select').change(function(){

        var criteria = $(this).val();



        if(criteria == 'ALL'){
            $('.content_block').show();
            return;
        }
        $('.filter_category').each(function(i,option){

            if($(this).html() == criteria){
                $(this).parent().show();
            }else {
                $(this).parent().hide();
            }
        });
    });

</script> 

请帮忙，我如何才能仅显示一组(假设为默认组)的内容。

Answer 1

在没有所有标记的情况下，不清楚您要做什么。

我编写了这个脚本，当您选择一个值时，它会隐藏所有其他 。也许你可以用它来创建你想要的东西

$('#content_select').change(function(){
  // find the selected option, then its optgroup parent, then all the others optgroups
  var optgroups = $(this).find('option:selected').parent().siblings()

  // add their children, and hide them
  optgroups.add(optgroups.children()).hide()
});