get javascript to filter using both drop down inputs

Question

i have 2 drop downs to filter a list. as of now it only filters which drop down was used last. i want them to work together, so that someone clicks "weeks" drop down, all the li with that class show, and then clicks "workouts" drop down and it filters it even more.

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

    if (current == 'all') {
      $('#FilterContainer').find('li.all').show();
    } else {

      $('#FilterContainer').find('li').hide();
      $('#FilterContainer').find('li.all.' + current).show();
    }

    return false;
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p align="center"><font face="futura" size="20px">Pick your workout here:</font>
</p>
<div align="center">
  <select style="font-size:20px" class="filterby">
    <option value="">
      <h5>Select Week</h5>
    </option>
    <option value="1">
      <h5>Week 1</h5>
    </option>
    <option value="2">
      <h5>Week 2</h5>
    </option>
    <option value="3">
      <h5>Week 3</h5>
    </option>
    <option value="4">
      <h5>Week 4</h5>
    </option>
  </select>

  <select style="font-size:20px" class="filterby">
    <option value="">
      <h5>Select Workout</h5>
    </option>
    <option value="sw1">
      <h5>Strength Workout #1</h5>
    </option>
    <option value="sw2">
      <h5>Strength Workout #2</h5>
    </option>
    <option value="cw1">
      <h5>Conditioning Workout #3</h5>
    </option>
    <option value="cw2">
      <h5>Conditioning Workout #4</h5>
    </option>
    <option value="rw">
      <h5>Recovery Workout</h5>
    </option>
  </select>
</div>
<div id="FilterContainer">
  <ul>
    <li class=" all 1 sw1" style="list-style:none; display:none">saasasasa
     
</div>
</li>
</ul>
</div>
<script>
  $('select').change(function() {
    var current = this.value;

    if (current == 'all') {
      $('#FilterContainer').find('li.all').show();
    } else {

      $('#FilterContainer').find('li').hide();
      $('#FilterContainer').find('li.all.' + current).show();
    }

    return false;
  });
</script>

Its is still unclear to me because ur sample lacks info to work with, so am not sure filter what from what... — Ahs N, Dec 02 '15 at 05:58

score 0 · Accepted Answer · answered Dec 02 '15 at 06:09

Created a fiddle for you http://jsfiddle.net/gurvinder372/whz4Lj6u/1/

$('select').change(function() {
  
   var filterbyWeekSelection = $.trim( $( "select[data-type='filterbyWeek']" ).val() );
   var filterbyWorkoutSelection = $.trim( $( "select[data-type='filterbyWorkout']" ).val() );
  
   //$('#FilterContainer').find('li.all.' + current).show();
    //var current = this.value;

   if (filterbyWeekSelection.length == 0 || filterbyWorkoutSelection || 0 )  {
      $('#FilterContainer').find('li.all').show();
    } 
  else 
  {
      $('#FilterContainer').find('li.' + filterbyWeekSelection + "." + filterbyWorkoutSelection).show();
  }

    return false;
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p align="center"><font face="futura" size="20px">Pick your workout here:</font>
</p>
<div align="center">
  <select style="font-size:20px" class="filterby" data-type='filterbyWeek'>
    <option value="">
      <h5>Select Week</h5>
    </option>
    <option value="1">
      <h5>Week 1</h5>
    </option>
    <option value="2">
      <h5>Week 2</h5>
    </option>
    <option value="3">
      <h5>Week 3</h5>
    </option>
    <option value="4">
      <h5>Week 4</h5>
    </option>
  </select>

  <select style="font-size:20px" class="filterby" data-type='filterbyWorkout'>
    <option value="">
      <h5>Select Workout</h5>
    </option>
    <option value="sw1">
      <h5>Strength Workout #1</h5>
    </option>
    <option value="sw2">
      <h5>Strength Workout #2</h5>
    </option>
    <option value="cw1">
      <h5>Conditioning Workout #3</h5>
    </option>
    <option value="cw2">
      <h5>Conditioning Workout #4</h5>
    </option>
    <option value="rw">
      <h5>Recovery Workout</h5>
    </option>
  </select>
</div>
<div id="FilterContainer">
  <ul>
    <li class=" all 1 sw1" style="list-style:none; display:none">saasasasa
     
</li>
</ul>
</div>

score 0 · Answer 2 · edited May 23 '17 at 11:51

Class names cannot just be a single number. Therefore you should try week1 sw1 as your class name instead of just 1 sw1 for example.
Since you have 2 filters, you need some way to keep track of the state of both of the filters in your $('select').change() handler. Either you need two variables to cache the filter option (implemented in my example below), or you need to handle both of them separately i.e. using two $('select').change() handlers.

Here's a fiddle that implements the behaviour you need.

score 0 · Answer 3 · answered Dec 02 '15 at 07:01

0

First your if statement will never run because you are not setting value = 'all' anywhere in the dropdown list.

answered Dec 02 '15 at 07:01

Raider

137
8

score 0 · Answer 4 · edited Dec 02 '15 at 21:35

0

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

edited Dec 02 '15 at 21:35

Andrei

42,814
35
154
218

answered Dec 02 '15 at 20:32

d bleazy

3
1

get javascript to filter using both drop down inputs

4 Answers4