Mixitup - Dropdown Filters + Buttons

HTML

<script src="//cdn.jsdelivr.net/jquery.mixitup/2.1.6/jquery.mixitup.min.js"></script>
<div id="filters_and_sorters">
<select id="area_filter">
<option value="all" selected="selected">area</option>
<option value=".boats">boats</option>
<option value=".cars">cars</option>
<option value=".bikes">bikes</option>
<option value=".hedgehogs">hedgehogs</option>
<option value=".cakes">cakes</option>
</select>
<select id="rating_filter">
<option value="all" selected="selected">rating</option>
<option value=".5">5</option>
<option value=".4">4</option>
<option value=".3">3</option>
<option value=".2">2</option>
<option value=".1">1</option>
</select>
<button class="filter" data-filter="all">show all</button>
<button class="sort" data-sort="rating:asc">sort by rating - asc</button>
<button class="sort" data-sort="rating:desc">sort by rating - desc</button>
</div>
<div id="message_area"></div>
<div id="container">
<div class="mix boats 1" data-rating="1">i am talking about boats</div>
<div class="mix cars 2" data-rating="2">i am talking about cars</div>
<div class="mix bikes 3" data-rating="3">i am talking about bikes</div>
<div class="mix hedgehogs 4" data-rating="4">i am talking about hedgehogs</div>
<div class="mix cakes 4" data-rating="4">i am talking about cakes</div>
</div>

CSS

#container .mix {
background: none repeat scroll 0 0 yellow;
border: 1px solid;
display: none;
}

#message_area {
display:none;
}

#filters_and_sorters {
background: none repeat scroll 0 0 lightgrey;
height: 30px;
margin-bottom: 10px;
}

JavaScript

function initFilters() {
    $('#container').mixItUp({
        layout: {
            display: 'block'
        },
        animation: {
            duration: 1000,
            effects: 'translateZ(-360px) stagger(110ms) fade',
            easing: 'ease'
        }
    });
}



initFilters();

// BEGIN area and rating filter
$('#area_filter, #rating_filter').on('change', function() {
    $('#container').mixItUp('filter', this.value);

    // <-- removed from here

});
// END area and rating filter

// BEGIN area filter message
$('#area_filter').on('change', function() {
    var area = this.value;
    if (area != "all") {
        $('#message_area').css("display", "block");
        var area = area.replace('.', '');
        $('#message_area').html("");
        $('#message_area').append("<p>You are viewing entries related to " + area + ".</p>");
    } else {
        $('#message_area').html("");
        $('#message_area').css("display", "none");
    }
});
// END area filter message

// BEGIN rating filter message
$('#rating_filter').on('change', function() {
    var rating = this.value;
    if (rating != "all") {
        if ($('.mix').is(this.value)) {
            $('#message_area').css("display", "block");
            $('#message_area').html("");
            $('#message_area').append("<p>Here are some things:</p>");
        } else {
            $('#message_area').css("display", "block");
            $('#message_area').html("");
            $('#message_area').append("<p>There are no things.</p>");
        }
    } else {
        $('#message_area').html("");
        $('#message_area').css("display", "none");
    }
});
// END rating filter message