Isotope select lists in Toolset Views

HTML

<!-- Standard show all results view. This isn't a Parametric Search view. -->
[wpv-layout-start]
<div class="themes-filter">
      		<select class="filter option-set" data-filter-group="local">
      		<option data-filter-value="">Any</option>
     		<option data-filter-value=".national">National</option>
      		<option data-filter-value=".local">Local</option>
    		</select>
<br />

 <select class="filter option-set" data-filter-group="type">
      		<option data-filter-value="">Any</option>
         	<option data-filter-value=".general">General</option>
         	<option data-filter-value=".sport">Play/Sport</option>
          	<option data-filter-value=".vision">Vision & Hearing</option>
    	</select>

      <br />

       <select class="filter option-set" data-filter-group="structure">
         <option data-filter-value="">Any</option>
           <option data-filter-value=".statutory">Statutory</option>
           <option data-filter-value=".voluntary">Voluntary</option>
          <option data-filter-value=".grant">Grant funded</option>
    	</select>
</div>
    [wpv-items-found]
    <!-- wpv-loop-start -->
        <div class="grid">
          <wpv-loop>
            <!-- Using WPV-POST-TAXONOMY short-code to product category name as an additional CSS class. -->
            <!-- The category name as class, is being used to enable filters above. -->
             <div class='item [wpv-post-taxonomy type="organisation-type" format="slug" separator="  "] [types field="organisation-main-topic" separator=" "][/types] [types field="structure" separator=" "][/types]'>
               [wpv-post-link]
              </div>
          </wpv-loop>
        </div>
    <!-- wpv-loop-end -->
    [/wpv-items-found]
    [wpv-no-items-found]
        [wpml-string context="wpv-views"]<strong>No items found</strong>[/wpml-string]
    [/wpv-no-items-found]
[wpv-layout-end]


CSS

.item {
  margin-top: 10px;
  margin-right: 6px;
  margin-bottom: 5px;
  height: 100px;
  width: 31%;
  border: 1px solid darkgray;
  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
  padding: 10px;
  text-align: center;
}

#titleholder {
 height: 60px;
}

#logoholder {
 height: 130px;
}

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

/* ---- btton ---- */

.btton {
  display: inline-block;
  padding: 0.5em 1.0em;
  background: #EEE;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 0 1px white;
  cursor: pointer;
}

.btton:hover {
  background-color: #8CF;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #222;
}

.btton:active,
.btton.is-checked {
  background-color: #28F;
}

.btton.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.btton:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* ---- buttn ---- */

.buttn {
  display: inline-block;
  padding: 0.5em 1.0em;
  background: #EEE;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 0 1px white;
  cursor: pointer;
}

.buttn:hover {
  background-color: #8CF;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #222;
}

.buttn:active,
.buttn.is-checked {
  background-color: #28F;
}

.buttn.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.buttn:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* ---- button-group ---- */

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .btton {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

.button-group .btton:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .btton:last-child { border-radius: 0 0.5em 0.5em 0; }

/* ---- button-group-type ---- */

.button-group-type:after {
  content: '';
  display: block;
  clear: both;
}

.button-group-type .buttn {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

/* ---- isotope ---- */

.grid {
  max-width: 1200px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ui group */

.ui-group {
  display: inline-block;
}

.ui-group h3 {
  display: inline-block;
  vertical-align: top;
  line-height: 32px;
  margin-right: 0.2em;
  font-size: 16px;
}

.ui-group .button-group {
  display: inline-block;
  margin-right: 20px;
}


JS

jQuery( function() {
  // init Isotope
  var $grid = jQuery('.grid').isotope({
    itemSelector: '.item',
    layoutMode: 'fitRows'
  });

  var $select = jQuery('.themes-filter select');
  var filters = {};

  $select.change(function() {
    var $this = jQuery(this);
  	var $optionSet = $this;
	        var group = $optionSet.attr('data-filter-group');
			filters[group] = $this.find('option:selected').attr('data-filter-value');

	        var isoFilters = [];
	        for (var prop in filters) {
	            isoFilters.push(filters[prop])
	        }
	        var selector = isoFilters.join('');

   		 $grid.isotope({ filter: selector });
    });


});






edit: added code to reset the filters and labels: (add to bottom of JS code within last }); and add a button or some text to reset the form, under a div id = "button--reset"


jQuery('#button--reset').on( 'click', function() {
    //reset labels
    jQuery('.filter option').prop('selected', function() {
      return this.defaultSelected;
      });
    // reset filters
    filters = {};
    $grid.isotope({ filter: '*' });
    // reset buttons
    $buttons.removeClass('is-checked');
    $anyButtons.addClass('is-checked');
  });