Forum : jQuery filtre avec des select

Bonjour,

alors voila un petit problème sur lequel je penche depuis un petit moment. Je dois louper quelque chose. Je vous explique.

J'ai une div qui a 4 class sous cette forme :

<div class="bloc class_filtre_1_1 class_filtre_2_1 class_filtre_3_1"></div>
<div class="bloc class_filtre_1_1 class_filtre_2_2 class_filtre_3_1"></div>
<div class="bloc class_filtre_1_1 class_filtre_2_2 class_filtre_3_2"></div>
<div class="bloc class_filtre_1_1 class_filtre_2_2 class_filtre_3_3"></div>
<div class="bloc class_filtre_1_2 class_filtre_2_1 class_filtre_3_1"></div>
<div class="bloc class_filtre_1_2 class_filtre_2_2 class_filtre_3_1"></div>
<div class="bloc class_filtre_1_2 class_filtre_2_3 class_filtre_3_1"></div>
..]

J'ai aussi 3 select différents avec des options qui représente les class de ma div.

<select id="filtre_1">
    <option value="class_filtre_1_1"></option>
    <option value="class_filtre_1_2"></option>
    <option value="class_filtre_1_3"></option>
    ..]
</select>
<select id="filtre_2">
    <option value="class_filtre_2_1"></option>
    <option value="class_filtre_2_2"></option>
    <option value="class_filtre_2_3"></option>
    ..]
</select>
<select id="filtre_3">
    <option value="class_filtre_3_1"></option>
    <option value="class_filtre_3_2"></option>
    ..]
</select>

Et ce que je veux au final c'est qu'avec ces 3 select j'arrive à filtrer une liste de div qui comporte les différentes class. Et pour au final qu'il ne reste que les div avec les 3 class sélectionné.

Merci

Vallyan

Réponse acceptée

http://codepen.io/anon/pen/LDvAF

HTML:

<div class="bloc class_filtre_1_1 class_filtre_2_1 class_filtre_3_1">1-1-1</div>
<div class="bloc class_filtre_1_1 class_filtre_2_1 class_filtre_3_2">1-1-2</div>
<div class="bloc class_filtre_1_1 class_filtre_2_1 class_filtre_3_3">1-1-3</div>
<div class="sep"></div>
<div class="bloc class_filtre_1_1 class_filtre_2_2 class_filtre_3_1">1-2-1</div>
<div class="bloc class_filtre_1_1 class_filtre_2_2 class_filtre_3_2">1-2-2</div>
<div class="bloc class_filtre_1_1 class_filtre_2_2 class_filtre_3_3">1-2-3</div>
<div class="sep"></div>
<div class="bloc class_filtre_1_1 class_filtre_2_3 class_filtre_3_1">1-3-1</div>
<div class="bloc class_filtre_1_1 class_filtre_2_3 class_filtre_3_2">1-3-2</div>
<div class="bloc class_filtre_1_1 class_filtre_2_3 class_filtre_3_3">1-3-3</div>
<div style="clear: both;"></div>
<div class="bloc class_filtre_1_2 class_filtre_2_1 class_filtre_3_1">2-1-1</div>
<div class="bloc class_filtre_1_2 class_filtre_2_1 class_filtre_3_2">2-1-2</div>
<div class="bloc class_filtre_1_2 class_filtre_2_1 class_filtre_3_3">2-1-3</div>
<div class="sep"></div>
<div class="bloc class_filtre_1_2 class_filtre_2_2 class_filtre_3_1">2-2-1</div>
<div class="bloc class_filtre_1_2 class_filtre_2_2 class_filtre_3_2">2-2-2</div>
<div class="bloc class_filtre_1_2 class_filtre_2_2 class_filtre_3_3">2-2-3</div>
<div class="sep"></div>
<div class="bloc class_filtre_1_2 class_filtre_2_3 class_filtre_3_1">2-3-1</div>
<div class="bloc class_filtre_1_2 class_filtre_2_3 class_filtre_3_2">2-3-2</div>
<div class="bloc class_filtre_1_2 class_filtre_2_3 class_filtre_3_3">2-3-3</div>
<div style="clear: both;"></div>
<div class="bloc class_filtre_1_3 class_filtre_2_1 class_filtre_3_1">3-1-1</div>
<div class="bloc class_filtre_1_3 class_filtre_2_1 class_filtre_3_2">3-1-2</div>
<div class="bloc class_filtre_1_3 class_filtre_2_1 class_filtre_3_3">3-1-3</div>
<div class="sep"></div>
<div class="bloc class_filtre_1_3 class_filtre_2_2 class_filtre_3_1">3-2-1</div>
<div class="bloc class_filtre_1_3 class_filtre_2_2 class_filtre_3_2">3-2-2</div>
<div class="bloc class_filtre_1_3 class_filtre_2_2 class_filtre_3_3">3-2-3</div>
<div class="sep"></div>
<div class="bloc class_filtre_1_3 class_filtre_2_3 class_filtre_3_1">3-3-1</div>
<div class="bloc class_filtre_1_3 class_filtre_2_3 class_filtre_3_2">3-3-2</div>
<div class="bloc class_filtre_1_3 class_filtre_2_3 class_filtre_3_3">3-3-3</div>
<div style="clear: both;"></div>
select the following divs:
<select class="filtre" id="filtre_1">
    <option value=""></option>
    <option value=".class_filtre_1_1">1</option>
    <option value=".class_filtre_1_2">2</option>
    <option value=".class_filtre_1_3">3</option>
</select>-

<select class="filtre" id="filtre_2">
    <option value=""></option>
    <option value=".class_filtre_2_1">1</option>
    <option value=".class_filtre_2_2">2</option>
    <option value=".class_filtre_2_3">3</option>
</select>-

<select class="filtre" id="filtre_3">
    <option value=""></option>
    <option value=".class_filtre_3_1">1</option>
    <option value=".class_filtre_3_2">2</option>
    <option value=".class_filtre_3_3">3</option>
</select>

CSS:

div.bloc{
    height: 15px;
    width: 50px;
    margin: 10px;
    float: left;
    font-size: 10px;
    padding: 10px;
    display: table;
    vertical-align: middle;
}
.not_highlighted{
    color: rgba(255, 255, 255, 0);
}
.highlighted{
    background-color: red;
}
div.sep{
    width: 0px;
    margin: 10px;
    float: left;
}

JS:

$(".filtre").change(function(){
    $("div.bloc").removeClass('highlighted').addClass('not_highlighted');
    var selector = '';
    $(".filtre").each(function(i, e, a){
        selector+=$(this).val();
        if(i == $(".filtre").length-1)
            $("div.bloc"+selector).removeClass('not_highlighted').addClass('highlighted');
    });
});

Amstramgram

Auteur

Oui c'est ca, merci. Je n'avais pas pensé à mettre le point pour la class dans la value du select.

Je suis aussi arrivé a un résultat mais il est beaucoup beaucoup plus long...

(function($){
 var article = $('.bloc');
 $('.tri_distributeurs select').change(function () {
    event.preventDefault();
    filterSelect();
 }).trigger('change');

 function filterSelect(){
    event.preventDefault();
    console.log(" ___________________________");
    var value_select_distributeur = $("#select_distributeur").val();
    var value_select_departement = $("#select_departement").val();
    var value_select_gamme = $("#select_gamme").val();
    console.log("1 : "+value_select_distributeur);
    console.log("2 : "+value_select_departement);
    console.log("3 : "+value_select_gamme);
    if(value_select_distributeur != 'none' || value_select_departement != 'none' || value_select_gamme != 'none'){
        article.removeClass('hidden');
        if(value_select_distributeur != 'none'){
             $('.bloc:not(.'+value_select_distributeur+')').addClass('hidden');
        }
        if(value_select_departement != 'none'){
             $('.bloc:not(.'+value_select_departement+')').addClass('hidden');
        }
        if(value_select_gamme != 'none'){
             $('.bloc:not(.'+value_select_gamme+')').addClass('hidden');
        }
        if(value_select_distributeur != 'none' && value_select_departement != 'none' || value_select_departement != 'none' && value_select_gamme != 'none' || value_select_departement != 'none' && value_select_gamme != 'none'){
            article.removeClass('hidden');
            if(value_select_distributeur != 'none' && value_select_departement != 'none'){
                $('.bloc:not(.'+value_select_departement+'.'+value_select_distributeur+')').addClass('hidden');
            }
            else if(value_select_departement != 'none' && value_select_gamme != 'none'){
                $('.bloc:not(.'+value_select_gamme+'.'+value_select_departement+')').addClass('hidden');
            }
            else if(value_select_distributeur != 'none' && value_select_gamme != 'none'){
                $('.bloc:not(.'+value_select_gamme+'.'+value_select_distributeur+')').addClass('hidden');
            }
        }
        if(value_select_distributeur != 'none' & value_select_departement != 'none' & value_select_gamme != 'none' ){
            $('.bloc:not(.'+value_select_gamme+'.'+value_select_departement+'.'+value_select_distributeur+')').addClass('hidden');
        }
    }
    else {
        article.removeClass('hidden');
    }
    console.log(" ___________________________");
 }

})(jQuery);

Vallyan

oula, oui, c'était plus long ! ^^

jQuery filtre avec des select

3 réponses