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')으로 모든 하위 카테고리와 일치합니다.