4

I'm not advanced enough in JS to get this working fully.

I have two select fields with options:

    <select name="" id="filter-position">
      <option value="all">Filter by position</option>
      <option value=".instructor">Instructor</option>
      <option value=".leader">Leader</option>
      <option value=".blah">Blah</option>
      <option value=".whatever">Whatever</option>
    </select>

    <select name="" id="filter-location">
      <option value="all">Filter by position</option>
      <option value=".portland">Portland</option>
      <option value=".missoula">Missoula</option>
      <option value=".chicago">Chicago</option>
      <option value=".newyork">New York</option>
    </select>

The container where the filtered items live looks a little like this:

    <ul id="filter-container">
        <li class="mix">...</li>
        <li class="mix">...</li>
        <li class="mix">...</li>
        <li class="mix">...</li>
        <li class="mix">...</li>
        <li class="mix">...</li>
    </ul>

I can get each one to filter properly but not together (i.e., AND). The JS code I'm using goes like this:

  $(function(){
    var $positionSelect = $('#filter-position'),
        $locationSelect = $('#filter-location'),
        $container = $('#filter-container');

    $container.mixItUp({});

    $positionSelect.on('change', function(){
      $container.mixItUp('filter', this.value);
    });

    $locationSelect.on('change', function(){
      $container.mixItUp('filter', this.value);
    });
  });

If I filter by one select, things filter properly. If I then filter by the other, it overrides the first filter. What I want is for them to both be used.

I know there's a way to get this to work, but I'm not sure how to get that concatenated string to do the "and" logic as documented in the Advanced Filtering section of the docs using <select>. Help?

A Herrera
  • 612
  • 1
  • 5
  • 17

3 Answers3

5

You're really close! Because of how the mixItUp API works, filters aren't additive (e.g. when you call mixItUp.filter, it doesn't add a new filter to what's already active). So, you just need to construct a new filter string from the values of both dropdowns whenever one of them changes. You can accomplish that like so:

$(function(){
    var $positionSelect = $('#filter-position'),
        $locationSelect = $('#filter-location'),
        $container = $('#filter-container');

    $container.mixItUp({});

    $('#filter-position, #filter-location').on('change', function() {

      var filterString = $positionSelect.val() + $locationSelect.val();

      $container.mixItUp('filter', filterString);
    });

  });

I opted to use the jQuery .val() over the native .value in this case since you're already using jQuery, and val() will probably be more reliable in this case. Let me know if you run into trouble.

You may also want to to change this:

<option value="all">Filter by position</option>

To this:

<option value="">Filter by position</option>

for both of your dropdown menus, otherwise you might get some weird behavior.

Evan Rowe
  • 103
  • 5
  • ah-ha! Thank you for taking the time to explain that a bit. I got real close prior to seeing your reply. This puts it all together for me. Thanks again! – A Herrera Oct 27 '15 at 19:47
0

Use comma like.. $('#filter-location, #filter-container') .on('change', function(){ ... ;)

HsYoo
  • 76
  • 3
  • That doesn't achieve the desired result. The filters still cause 'OR' logic (i.e., filter by select 1 OR select 2). I need it to filter by select 1 AND select 2. – A Herrera Oct 23 '15 at 04:41
0

Something like this...

$(function(){
    $container = $('#filter-container');

    $container.mixItUp({});

    $container.on('change','#filter-position, #filter-location', function(){
        $container.mixItUp('filter', this.value);
    });
});
An0nC0d3r
  • 1,275
  • 13
  • 33
  • That didn't quite work - nothing happens. I'm wondering about the $container.on('change'... bit - why would the container change? – A Herrera Oct 23 '15 at 04:41