Category Filter - Dropdown

by japaneselanguagefriend

HTML

<p>Location by Services: </p>
        <select class="filterby">
        <option value="all"><h5>All Locations</h5></option>
        <option value="category-weight-loss"><h5>Weight Loss</h5></option>
        <option value="category-massage"><h5>Massage</h5></option>
        <option value="category-chiropractic"><h5>Chiropractic</h5></option>
      </select>


  <div id="FilterContainer">

   <div class="all 1 nj category-weight-loss category-massage">Clinic Center 15</div>
  <div class="all 1 ny">Clinic Center 1</div>
  <div class="all 1 pa">Clinic Center 2</div>
  <div class="all 2 nj">Clinic Center 3</div>
  <div class="all 2 ny">Clinic Center 4</div>
  <div class="all 2 pa">Clinic Center 5</div>
  <div class="all 3 nj">Clinic Center 6</div>
  <div class="all 3 ny category-weight-loss">Clinic Center 7</div>
  <div class="all 3 pa category-weight-loss">Clinic Center 8</div>
  <div class="all 1 nj category-chiropractic">Clinic Center 9</div>
  <div class="all 1 pa">Clinic Center 10</div>
  <div class="all 1 pa">Clinic Center 11</div>
  <div class="all 2 nj">Clinic Center 12</div>
  <div class="all 2 ny">Clinic Center 13</div>
  <div class="all 2 ny">Clinic Center 14</div>

JavaScript

$("select.filterby").change(function(){
    var filters = $.map($("select.filterby").toArray(), function(e){
        return $(e).val();
    }).join(".");
    $("div#FilterContainer").find("div").hide();
    $("div#FilterContainer").find("div." + filters).show();
});