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') - 将匹配所有子类别。

使用jQuery过滤类别/子类别

2 个答案: