2010-07-09 93 views
1

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

回答

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> 
+0

另一種做法可能是DOM密集程度更高,但整體需要的代碼更少 - 您可以使用類別和子類別創建{object},並使用您的對象和一些.append()魔法填充子類別select。這樣,你只需要依靠兩個選擇功能,但你會動態地處理一個內容。 – 2010-07-09 21:10:46

+0

噢,並且確保在這些選擇上放置「autocomplete ='off'」,如果您希望它們在頁面刷新時重置爲「全部」。 – 2010-07-09 21:16:18

0

因此,在您選擇的更改中,您可以觸發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') - 將匹配所有子類別。

+0

我不太確定我關注。如何設置選擇?這些類名稱是選擇選項中的值嗎? – Keith 2010-07-09 20:21:35