我有一張表,其中每行都有一個類別列和一個子類別列。我需要讓用戶選擇一個類別進行過濾,然後只顯示相關的子類別,以便他們可以進一步過濾。我認爲這可能是一個選擇下拉列表,並且只有在存在子類別時才顯示第二個下拉列表。我見過一些使用服務器端腳本的例子(例如Remy Sharp的解決方案http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/),但我只需要嚴格的客戶端jQuery解決方案。任何人都有最好的方式來做到這一點或它的例子的建議?使用jQuery過濾類別/子類別
1
A
回答
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 & 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 & 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
因此,在您選擇的更改中,您可以觸發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
相關問題
- 1. jquery類別子類別,子類別等
- 2. WordPress的類別篩選器不上的子類別過濾
- 3. 使用php顯示類別,子類別和子類別
- 4. 在Jekyll中按類別過濾帖子
- 5. 類別的子類別通過JSON PHP
- 6. 使用json和jquery顯示一個類別的子類別
- 7. 添加類別過濾器
- 8. 優化類別過濾器
- 9. 過濾類別與WordPress的
- 10. 創建類別過濾器
- 11. 存儲過程與CTE查詢類別,子類別,子子類別
- 12. 如何使多類別過濾器使用jQuery,HTML和CSS
- 13. 類別/子類別下拉
- 14. 類別和子類別
- 15. Django - 類別和子類別
- 16. Codeigniter:類別和子類別
- 17. 類別和子類別Android
- 18. 類別和子類別wordpress
- 19. 的類別和子類別
- 20. 類別和子類別MVC2
- 21. Dropdownlist和類別子類別
- 22. 類別和子類別Rails
- 23. 類別和子類別
- 24. Laravel類別 - 子類別
- 25. WordPress的分類類別過濾
- 26. Django的類別,子類別和子子類別
- 27. MySql,產品的可選類別,子類別和子子類別
- 28. 使用jQuery按類別選擇子div
- 29. 使用Jekyll-Bootstrap中的類別過濾帖子
- 30. 切換和過濾器類別使用jquery
另一種做法可能是DOM密集程度更高,但整體需要的代碼更少 - 您可以使用類別和子類別創建{object},並使用您的對象和一些.append()魔法填充子類別select。這樣,你只需要依靠兩個選擇功能,但你會動態地處理一個內容。 – 2010-07-09 21:10:46
噢,並且確保在這些選擇上放置「autocomplete ='off'」,如果您希望它們在頁面刷新時重置爲「全部」。 – 2010-07-09 21:16:18