MixItUp with two select / dropdown fields

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?

Solution

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.