使用jQuery過濾類別/子類別

Question

我有一張表，其中每行都有一個類別列和一個子類別列。我需要讓用戶選擇一個類別進行過濾，然後只顯示相關的子類別，以便他們可以進一步過濾。我認爲這可能是一個選擇下拉列表，並且只有在存在子類別時才顯示第二個下拉列表。我見過一些使用服務器端腳本的例子（例如Remy Sharp的解決方案http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/），但我只需要嚴格的客戶端jQuery解決方案。任何人都有最好的方式來做到這一點或它的例子的建議？

Answer 1

我喜歡Dan的想法，所以我對其進行了擴展（相當多）。你應該可以將它粘貼到文本編輯器中並觀看它的工作。

基本上，它使用TR上的類來顯示和隱藏它們，並使用大量的隱藏選擇來顯示子類別組。

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

<select id="masterCategory"> 
    <option value="all">All</option> 
    <option value="sandwiches">Sandwiches</option> 
    <option value="bagels">Bagels</option> 
</select> 

<div> 

    <select id="all"> 
    <option value="all">All</option> 
    <option value="pastrami">Pastrami</option> 
    <option value="pbj">PBJ</option> 
    <option value="baconranch">Bacon &amp; Ranch</option> 
    <option value="jalapeno">Jalapeno</option> 
    <option value="onion">Onion</option> 
    <option value="poppyseed">Poppyseed</option> 
    </select> 

    <select id="sandwiches" style="display: none"> 
    <option value="sandwiches">All</option> 
    <option value="pastrami">Pastrami</option> 
    <option value="pbj">PBJ</option> 
    <option value="baconranch">Bacon &amp; Ranch</option> 
    </select> 

    <select id="bagels" style="display: none"> 
    <option value="bagels">All</option> 
    <option value="jalapeno">Jalapeno</option> 
    <option value="onion">Onion</option> 
    <option value="poppyseed">Poppyseed</option> 
    </select> 

</div> 

<table id="content"> 
    <tr class="sandwiches pastrami pbj"><td>sandwiches pastrami pbj</td></tr> 
    <tr class="sandwiches baconranch"><td>sandwiches baconranch</td></tr> 
    <tr class="bagels jalapeno"><td>bagels jalapeno</td></tr> 
    <tr class="bagels onion poppyseed"><td>bagels onion poppyseed</td></tr> 
</table> 

<script type="text/javascript"> 

    $(function(){ 

    $('select').bind('change', function(){ 
     var category = $(this).val(); 

     $('table#content').find('tr').each(function(){ 
     if($(this).hasClass(category) || category == 'all'){ 
      $(this).show(); 
     } else { 
      $(this).hide();  
     } 
     }); 
    }); 

    $('select#masterCategory').bind('change', function(){ 

     $('select#' + $(this).val()).fadeIn().siblings().fadeOut(); 

    }); 

    }); 

</script> 

Answer 2

因此，在您選擇的更改中，您可以觸發classifyCategories - 當然，您需要編寫一些內容來隱藏與父類別不匹配的選擇項，但這可能有助於您進行行分類。

<table> 
    <tr class="topLevelCategoryA subCategoryC"><td>content</td></tr> 
    <tr class="topLevelCategoryB subCategoryC"><td>content</td></tr> 
    <tr class="topLevelCategoryD"><td>content</td></tr> 
    <tr class="topLevelCategoryZ subCategoryC"><td>content</td></tr> 
</table> 

function classifyCategories() { 
    var parentCategory = $('#mainSelect').val(); 
    var subCategory = $('#mainSelect').siblings('select:visible').val(); 
    var query = "." + parentCategory; 
    if(subCategory) { 
     query += "." + subCategory; 
    } 
    $('table tr').not(query).hide(); 
} 

前提是使用類選擇器。 $('table tr').not('.topLevelCategoryB.subCategoryC')將只匹配該配置，其中$('table tr').not('.topLevelCategoryB') - 將匹配所有子類別。