jQuery – proste filtrowanie za pomocą listy wyboru

Prosta lista wyboru w html to bardzo potężne narzędzie, gdy zaprzęgnie się do niego bibliotekę jQuery. Poniższy snippet filtruje tabelę ukrywając wszystkie klasy poza wybraną z listy. Oczywiście może zostać wykorzystany do nieskończonej ilości sposobów filtracji.

Zalety rozwiązania

Bardzo często jednak stosuję właśnie tą metodę filtracji ponieważ wybór opcji w liście bardzo dobrze wyświetla się na urządzeniach mobilnych bez dodatkowej pracy.
To rozwiązanie również bardzo dobrze spisuje się w filtrowaniu postów np w archiwach w WordPress. Można wówczas filtrować po praktycznie dowolnym parametrze jaki posiadają nasze posty (data, kategoria, tagi, tytuł itd.)

<select id="listakolorow">
<option value="wszystkie">wszystkie</option>
<option value="jasna">jasne</option>
<option value="bursztynowa">bursztynowe</option>
<option value="ciemna">ciemne</option>
</select>//html generujący listę wyboru opcji do filtrowania
<script>
$(function() {
    $('.singlecolor').show(); 
    $('#listakolorow').change(function(){
        if($('#listakolorow').val() == 'jasna') { //jesli wybrano z listy opcję z value="jasna" to uruchom poniższą akcję
          $('.ciemna, .bursztynowa').hide();   //ukrywamy pozostałe klasy np. wiersze tabeli lub paragrafy
		  $('.jasna').show();  //pokaz wybraną klasę
			} 
		else if($('#listakolorow').val() == 'bursztynowa') {
          $('.jasna, .ciemna').hide();   
		  $('.bursztynowa').show(); 
		} 
	  else if($('#listakolorow').val() == 'ciemna') {
          $('.jasna, .bursztynowa').hide();   
		  $('.ciemna').show(); 
		} 
	  
	  else {
            $('.jasna, .bursztynowa, .ciemna').show(); //jeśli żadna pozycja nie została wybrana pokaż wszystkie klasy
        } 
    });
});
</script>