過濾器必須顯示默認組

我在這裏有一個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>

請幫幫忙，我怎麼能顯示來自一組內容而已，比方說，一個默認組。

來源

2013-10-17 Valeri Crudu

哪裏的其餘標記？你缺少'.content_block'和'.filter_category' – ohaal

它不是很清楚你想要做什麼，沒有所有的標記。

我寫了這個腳本，隱藏所有其他<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-17 13:04:48 yoavmatchulsky

最簡單的方法是id s添加到您的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-17 13:07:02

過濾器必須顯示默認組

回答

相關問題