0

我这里有一个 HTML 选择表单，它显示组和类别。当我打开页面时，它会显示每个类别的所有内容，我想要做的是打开页面以仅显示来自 Group 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>

请帮忙，我如何只显示一个组的内容，比如说一个默认组。

4

2 回答 2

1

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

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

$('#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()
});
于 2013-10-17T13:04:48.183 回答
1

最简单的方法是将ids 添加到您optgroup的 s 并隐藏除一个之外的所有内容

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

于 2013-10-17T13:07:02.703 回答