How to store a selected value from a jquery function?

Question

Here's a simple jQuery filter. I'm trying to allow the selection of multiple options, and filter by all. Instead, it's filtering by "or", or it's just selecting the most recently selected option.

Either way, it's not allowing for multi-select.

What am I missing?

$(function() {
  var $filterSelect = $("#FilterSelect"),
    $sessionSelect = $("#SessionSelect"),
    $trackSelect = $("#TrackSelect"),
    $sortSelect = $("#SortSelect"),
    $container = $("#Container");

  $container.mixItUp();

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

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

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

  $sortSelect.on("change", function() {
    $container.mixItUp("sort", this.value);
  });
});

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body, button{
  font-family: 'Helvetica Neue', arial, sans-serif;
}

.controls{
  padding: 2%;
  background: #333;
  color: #eee;
}

label{
  font-weight: 300;
  margin: 0 .4em 0 1em;
}

label:first-child{
  margin-left: 0; 
}

button{
  display: inline-block;
  padding: .4em .8em;
  background: #666;
  border: 0;
  color: #ddd;
  font-size: 16px;
  font-weight: 300;
  border-radius: 4px;
  cursor: pointer;
}

button.active{
  background: #68b8c4;
}

button:focus{
  outline: 0 none;
}

button + label{
  margin-left: 1em;
}

.container{
  padding: 2% 2% 0;
  text-align: justify;
  font-size: 0.1px;
  background: #68b8c4;
  
  -webkit-backface-visibility: hidden;
}

.container:after{
  content: '';
  display: inline-block;
  width: 100%;
}

.container .mix,
.container .gap{
  display: inline-block;
  width: 49%;
}

.container .mix{
  text-align: left;
  background: #03899c;
  margin-bottom: 2%;
  display: none;
}

.container .mix.category-1{
  border-top: 2px solid limegreen;
}

.container .mix.category-2{
  border-top: 2px solid yellow;
}

.container .mix:after{
  content: attr(data-myorder);
  color: white;
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  padding: 4% 6%;
  font-weight: 700;
}

.container .mix:before{
  content: '';
  display: inline-block;
  padding-top: 60%;
}

@media all and (min-width: 420px){
  .container .mix,
  .container .gap{
    width: 32%;
  }
}

@media all and (min-width: 640px){
  .container .mix,
  .container .gap{
    width: 23.5%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/2.1.11/jquery.mixitup.js"></script>
<div class="controls">
  <label>By Date</label>
  
  <select id="FilterSelect">
    <option value="all">All</option>
    <option value=".date-1">April 26</option>
    <option value=".date-2">April 27</option>
    <option value=".date-3">April 28</option>
    <option value=".date-4">April 29</option>
  </select>
  
  <label>By Session Type</label>
  
  <select id="SessionSelect">
    <option value="all">All</option>
    <option value=".signature">Signature</option>
    <option value=".breakout">Breakout</option>
    <option value=".workshop">Workshop</option>
  </select>
  
  <label>By Education Track</label>
  
  <select id="TrackSelect">
    <option value="all">All</option>
    <option value=".howto">How-To</option>
    <option value=".people">People</option>
    <option value=".sourcing">Sourcing for Value</option>
    <option value=".csr">Corporate Social Responsibility</option>
    <option value=".digital">Digital Transformation</option>
    <option value=".challenges">Challenges</option>
    <option value=".strategic">Strategic to Practical Sessions</option>
  </select>  
  
  
  <label>Sort:</label>
  
  <select id="SortSelect">
    <option value="myorder:asc">Asc</option>
    <option value="myorder:desc">Desc</option>
  </select>
</div>
<div id="Container" class="container">
  <div class="mix date-1 signature howto" data-myorder="1"></div>
  <div class="mix date-3 breakout people" data-myorder="2"></div>
  <div class="mix date-1 workshop sourcing" data-myorder="3"></div>
  <div class="mix date-2 signature csr" data-myorder="4"></div>
  <div class="mix date-3 breakout digital" data-myorder="5"></div>
  <div class="mix date-4 workshop challenges" data-myorder="6"></div>
  <div class="mix date-2 signature strategic" data-myorder="7"></div>
  <div class="mix date-4 breakout howto" data-myorder="8"></div>
  
  <div class="gap"></div>
  <div class="gap"></div>
</div>