Categorie filter met jQuery

djordyh

Hallo,

Ik heb helaas erg weinig verstand van jQuery dus ik vraag me af hoe je het volgende maakt (of als iemand een kant en klare heeft zou helemaal mooi zijn):

Ik heb een overzicht van downloads, op rijen van 4. Ze hebben allemaal hun eigen categorie.
Hoe kan ik ervoor zorgen dat als ik in een dropdown bijvoorbeeld categorie 1 kiest, hij dan de div met alle rijen filtert zodat alleen de downloads met categorie 1 blijven staan? En dan zonder dat hij de pagina ververst, dat hij ze gewoon gelijk laad?

Ik had dit gevonden en geprobeerd, maar dat werkt helaas niet met een dropdown.

Kan iemand mij helpen?

MVG,
Djordy.

Dees

Misschien heb je hier wat aan?

DirkZz

JSFiddle ligt er uit hier, dus dan maar zo.
Even quick en dirty om je op weg te helpen.

HTML

<style>
    /* Snel wat markup, niet interessant. */
    div > div { width: 100px;height: 100px;text-align: center;float: left;background-color: #c0c0c0; margin: 10px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    function applyFilter(){
        /* Variabelen */
        var $categorieRijen, $teTonenCategorie;


        /* Alle rijen ophalen */
        $categorieRijen = $('.container > div');


        /* Welke categorie willen we tonen? Deze in de variabele $teTonenCategorie zetten */
        $teTonenCategorie = $('select[name="filter"]').val();


        /* Eerst alles op zichtbaar zetten */
        $categorieRijen.show();


        /* Wanneer de reset wordt aangereoepen, niets verbergen en alles zichtbaar laten.*/
        if($teTonenCategorie !== "reset") {
            /* Anders alle categorieen verbergen die niet de class hebben die voldoet aan het filter dat geselecteerd is in de dropdown */
            $categorieRijen.not('.' + $teTonenCategorie ).hide();
        }
    }
</script>


<select name="filter" onchange="applyFilter()">
    <option value="reset">reset</option>
    <option value="een">Een</option>
    <option value="twee">Twee</option>
    <option value="drie">Drie</option>
</select>


<div class="container">
    <div class="een"> Een </div>
    <div class="een"> Een </div>
    <div class="twee"> Twee </div>
    <div class="twee"> Twee </div>
    <div class="drie"> drie </div>
    <div class="een"> Een </div>
    <div class="drie"> drie </div>
    <div class="twee een"> een en twee </div>
</div>

Toon Meer

Je geeft dus elk element een class mee met de categorienaam en zet deze ook in de filter selector.

stijnhau

is inderdaad een goede oplssing dirkz maar noig iets beter vind ik het als je geen selectbox gebruikt maar option boxes zodat je kan zegge ik wil cat 1 & 3 zien bevoorbeeld.

DirkZz

Citaat van stijnhau

is inderdaad een goede oplssing dirkz maar noig iets beter vind ik het als je geen selectbox gebruikt maar option boxes zodat je kan zegge ik wil cat 1 & 3 zien bevoorbeeld.

Is wel veel netter ja,

Maar dan moet je wel goed opletten wanneer een item onder meerdere categorieën valt.

EDIT:

Dan krijg je dus dit:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
    	div > div { width: 100px;height: 100px;text-align: center;float: left;background-color: #c0c0c0; margin: 10px;}
	</style>
</head>
<body>
<div class="filterOpties">
	<label for="een">Een</label>
	<input id="een" class="filterOptie" type="checkbox" checked name="filterOptie" onchange="applyFilter(this)" value="een" />
	<label for="Twee">Twee</label>
	<input id="twee" class="filterOptie" type="checkbox" checked name="filterOptie" onchange="applyFilter(this)" value="twee" />
	<label for="Drie">Drie</label>
	<input id="drie" class="filterOptie" type="checkbox" checked name="filterOptie" onchange="applyFilter(this)" value="drie" />
</div>


<div class="container">
	<div class="opmaak class een"> Een </div>
	<div class="een"> Een </div>
	<div class="twee"> Twee </div>
	<div class="twee"> Twee </div>
	<div class="drie"> drie </div>
	<div class="een"> Een </div>
	<div class="drie"> drie </div>
	<div class="twee een">een en twee</div>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
	var $filterOpties;


	$filterOpties = $('.filterOpties > input[type="checkbox"][name="filterOptie"]').map(function(){
    	return this.value;
	});


	var $hiddenCategories = [];


	function applyFilter(element){


    	var $allElements, $isChecked;


    	$allElements = $('.container > div ');
    	$isChecked   =  $.inArray(element.value, $hiddenCategories);


    	if( $isChecked === -1  && element.checked === false) {
        	$hiddenCategories.push( element.value );
    	} else if  ( $isChecked !== -1 && element.checked === true ) {
        	$hiddenCategories.splice($isChecked, 1);
    	}


    	$.each($allElements, function (i, el){
        	var $shouldHide;


        	$shouldHide = $(el).map(function(){


            	var filterMatches, aantalFilterOpties, context;


            	context = this;
            	filterMatches = aantalFilterOpties = 0;


            	$.each($filterOpties, function(x, filterOptie){
                	if( context.className.contains(filterOptie) ){
                    	aantalFilterOpties ++;
                	}
                	if ( context.className.contains(filterOptie) && $.inArray(filterOptie, $hiddenCategories ) !== -1 ) {
                    	filterMatches++;
                	}
            	});


            	return { hide: (aantalFilterOpties !== filterMatches),  element: i};
        	});


        	$.each($shouldHide, function(toHide, divElement){
            	$($allElements[divElement.element]).toggle(divElement.hide);
        	});


    	});
	}
</script>
</body>
</html>

Toon Meer

djordyh

Bedankt DirkZz!

Heb het ingebouwd en het werkt
Wist ook niet dat het relatief simpel was, al die plugins hadden echt codes van honderde lijnen

ICTscripters

Dé plek voor IT

Dé plek voor IT

Het oorspronkelijke Criminals Script

StraatBaas is back, maar hoe?!

RPG game gebouwd met AI

Het Grote Vibe Code Topic

PWYL source gezocht

Ictscripters Chat

Help testers nodig voor android app Urgent

Partner Gezocht om meerdere NFT Collecties op Open Sea te Plaatsen

4-letter domein: Togi.nl

359 Nieuwe Domeinnamen Mei 2026

Sicarras.com - Moderne Mafia Text-Based RPG

Categorie filter met jQuery

Participate now!

Quanscient ontvangt €10M om AI- en kwantum-native hardware engineering te bevorderen - Tech.eu

Datalek bij leverancier Canvas - Universiteit van Amsterdam

Data privacy in 2026: Hoe de naleving van GDPR verandert

Functioneel ontwerp

Access Control List implementatie in PHP/MySQL - deel 1/2

Access Control List implementatie in PHP/MySQL - deel 2/2