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

如果没有所有标记，你不太清楚你要做什么。

我在编写此脚本时会在您选择值时隐藏所有其他＆lt; optgroups＆gt; 。也许你可以用它来创造你想要的东西

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

Answer 2

最简单的方法是将id添加到optgroup并隐藏除{1}以外的所有内容

HTML：

<optgroup id="g1" label="Group 1">
    <option value="cat1" class="optionGroup">cat1</option>
</optgroup>
<optgroup id="g2" 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 id="g3" 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 id="g4" 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>

CSS：

#content_select optgroup {
    display: none;
}

#content_select #g2 {
    display: block;
}

JSFiddle

并且没有CSS而是jQuery而不是

$('#content_select optgroup').hide();
$('#content_select #g2').show();

JSFiddle

过滤器必须显示默认组

2 个答案: