jquery multiple dropdown filter menu

Question

I have pictures hiding and showing based on a multiple dropdown menu selection. I am trying to have the 2 and possible more dropdown menus working together to refine a search.

If I select an item in the first dropdown, I would like to apply the second filter and so on with any additional dropdown.

I need some help with the jquery. My current problem is the 2nd filter never kicks in. It gets overwritten and resets the filter. If possible, I would like to add a 3rd filter to narrow the search even more to find exactly what I am looking for. Here is some sample code..

$('select').change(function(){
var current = $(this).attr('value');

if(current == 'all'){
    $('#FilterContainer').children('div.all').show();
} 

else {

    $('#FilterContainer').children('div:not(.' + current + ')').hide();
$('#FilterContainer').children('div.' + current).show();
 }

  return false;
})

HTML

  <p>Filter: </p>
        <select class="filterby">
        <option value="all"><h5>Show All</h5></option>
        <option value="1"><h5>One</h5></option>
        <option value="2"><h5>Two</h5></option>
        <option value="3"><h5>Three</h5></option>
      </select>



      <p>Location: </p>
        <select class="filterby">
        <option value="all"><h5>All Locations</h5></option>
        <option value="nj"><h5>NJ</h5></option>
        <option value="ny"><h5>NY</h5></option>
        <option value="pa"><h5>PA</h5></option>
      </select>


  <div id="FilterContainer">

  <div class="all 1 nj">Test One NJ</div>
  <div class="all 1 ny">Test One NY</div>
  <div class="all 1 pa">Test One PA</div>
  <div class="all 2 nj">Test Two NJ</div>
  <div class="all 2 ny">Test Two NY</div>
  <div class="all 2 pa">Test Two PA</div>
  <div class="all 3 nj">Test Three NJ</div>
  <div class="all 3 ny">Test Three NY</div>
  <div class="all 3 pa">Test Three PA</div>
  <div class="all 1 nj">Test One NJ</div>
  <div class="all 1 pa">Test One PA</div>
  <div class="all 1 pa">Test One PA</div>
  <div class="all 2 nj">Test Two NJ</div>
  <div class="all 2 ny">Test Two NY</div>
  <div class="all 2 ny">Test Two NY</div>

Answer 1

To make it work as you requested you could try the following code:

$('select').change(function () {
    var current = this.value;
    $.each($('#FilterContainer').find('div.all').not('.hidden').not('.'+current), function(){
        $(this).addClass('hidden');
    });
    $.each($('.'+current), function () {
        $(this).removeClass('hidden');
    });
});

And adding the CSS:

.hidden{
    display:none;
}

Gives you this working fiddle: http://jsfiddle.net/Q5DpP/5/

HOWEVER:

I don't think this is exactly where you will want to go. Please play with it, and you will understand. If you change the top filter, then the bottom filter everything is okay. But if you then change the top filter again, it will continue to hide... basically, once something is hidden it won't come back. This then becomes a logic puzzle, and the structure of your testing needs to be modified. It only becomes more complex as you go levels deeper.

You may wish to consider adding/removing different classes at each filter level, and then checking on only these filters.

Answer 2

Try this:

$('select').change(function () {
  var current = this.value; // <------get the value this way.
   if (current == 'all') {
      $('#FilterContainer').find('div.all').show();
   } else {
      $('#FilterContainer').find('div').hide();
      $('#FilterContainer').find('div.all.' + current).show();
   }
   return false;
});

Fiddle

Answer 3

Try this -

$("select.filterby").change(function(){
    var filters = $.map($("select.filterby").toArray(), function(e){
        return $(e).val();
    }).join(".");
    $("div#FilterContainer").find("div").hide();
    $("div#FilterContainer").find("div." + filters).show();
});

with LIVE DEMO