CodePen Embed - Bootstrap multiselect as filter

<div class="row">
  <a class="demo" href="#">link for focus (not part of pattern)</a>
  <div class="col-md-12" role="toolbar" aria-label="ODS filters">
  <select id="ODS-locations" name="ODS-locations" class="ods-filter"  multiple>
    
    <optgroup label="Maine">
      <option  value="40,520,60,860">Freeport, ME</option>
    </optgroup>
    <optgroup label="Colorado">
      <option  value="840">Lone Tree, CO</option>
    </optgroup>
    <optgroup label="Connecticut">
      <option  value="960">Danbury, CT</option>
      <option  value="540">South Windsor, CT</option>
    </optgroup>
    <optgroup label="Illinois">
      <option  value="780">Skokie, IL</option>
      <option  value="790">South Barrington, IL</option>
    </optgroup>
    <optgroup label="Kansas">
      <option  value="1120">Leawood, KS</option>
    </optgroup>
    <optgroup label="Massachusetts">
      <option  value="500">Burlington, MA</option>
      <option  value="770">Dedham, MA</option>
      <option  value="550">Mansfield, MA</option>
      <option  value="1280">Mashpee, MA</option>
    </optgroup>
    <optgroup label="Michigan">
      <option  value="1180">Clinton, MI</option>
    </optgroup>
    <optgroup label="Minnesota">
      <option  value="990">Bloomington, MN</option>
    </optgroup>
    <optgroup label="New Hampshire">
      <option  value="410">West Lebanon, NH</option>
    </optgroup>
    <optgroup label="New Jersey">
      <option  value="950">Freehold, NJ</option>
      <option  value="320">Marlton, NJ</option>
      <option  value="900">Paramus, NJ</option>
    </optgroup>
    <optgroup label="New York">
      <option  value="530">Albany, NY</option>
      <option  value="970">Fayetteville, NY</option>
      <option  value="1200">Lake Grove, NY, NY</option>
      <option  value="810">Victor, NY</option>
      <option  value="820">Yonkers, NY</option>
    </optgroup>
    <optgroup label="Ohio">
      <option  value="1130">Cincinnati, OH</option>
      <option  value="1110">Columbus, OH</option>
      <option  value="1000">Lyndhurst, OH</option>
    </optgroup>
    <optgroup label="Pennsylvania">
      <option  value="510">Center Valley, PA</option>
      <option  value="890">King of Prussia, PA</option>
      <option  value="800">Pittsburgh, PA</option>
    </optgroup>
    <optgroup label="Rhode Island">
      <option  value="1140">Cranston, RI</option>
    </optgroup>
    <optgroup label="Virginia">
      <option  value="1360">Charlottesville, VA</option>
      <option  value="50">Tysons Corner Center, VA</option>
      <option  value="1090">Richmond, VA</option>
      <option  value="1170">Virginia Beach, VA</option>
    </optgroup>
    <optgroup label="Vermont">
      <option  value="980">Burlington, VT</option>
    </optgroup>
    <optgroup label="Wisconsin">
      <option  value="1190">Brookfield, WI</option>
    </optgroup>
  </select>

    <select id="ODS-event-type" name="ODS-event-type" class="ods-filter" multiple>
      <option  data-attr="2944">Competition</option>
      <option  data-attr="2945">L.L.Bean Adventures at Sunday River</option>
      <option  data-attr="2436">Instructional Course</option>
      <option  data-attr="2437">Overnight Trip</option>
      <option  data-attr="2438">Day Tour</option>
      <option  data-attr="2439">Instructor Certification Course</option>
      <option  data-attr="2600">Youth Camps</option>
      <option  data-attr="2440">Women's-Only Adventure</option>
      <option  data-attr="2441">Private Lesson</option>
      <option  data-attr="2474">Discovery Course</option>
      <option  data-attr="-1">Free Events</option>
  </select>

    <select id="ODS-skill-level" name="ODS-skill-level" class="ods-filter" multiple>
                        <option  data-attr="2074">Intermediate</option>
                        <option  data-attr="2443">Advanced</option>
                        <option  data-attr="2475">Beginner</option>
                </select>
    
    <select id="ODS-price" class="ods-filter" multiple>
      <option  data-attr="-1">Free</option>
        <option  data-attr="1">$1 to $30</option>
        <option  data-attr="2">$30 to $50</option>
        <option  data-attr="3">$50 to $100</option>
        <option  data-attr="4">$100+</option>
        
</select>
    <a id="clearer" href="#">Reset all filters</a>
  </div>

</div>

.multiselect-container li.active a  {
  background-color: #fff;
  color: #000;
}

.multiselect-container>li.multiselect-all {
  border-bottom: 1px solid #e9e9e9;
  padding: 5px 0;
  margin-bottom: 15px;
}

#clearer {
  padding-left: 10px;
  vertical-align: middle;
}

.row {
  padding: 20px;
}

a.demo {
  padding: 20px;
  display: block;
}

      $("#ODS-locations").multiselect({
  enableClickableOptGroups: true,
  //includeSelectAllOption: true,
  nonSelectedText: "Events near",
  //enableCollapsibleOptGroups: true,
  //selectAllText: "View all",
  maxHeight: 400,
  // button text test code
  buttonText: function(options, select) {
    if (
      options.length === 0 ||
      options.length === $("#ODS-locations option").length
    ) {
      return "Events near";
    } else {
      return "Events near (" + options.length + ")";
    }
  }
});

$("#ODS-event-type").multiselect({
  enableClickableOptGroups: true,
  //includeSelectAllOption: true,
  nonSelectedText: "Event type",
  //selectAllText: "View all",
  maxHeight: 400,
  // button text test code
  buttonText: function(options, select) {
    if (
      options.length === 0 ||
      options.length === $("#ODS-event-type option").length
    ) {
      return "Event type";
    } else {
      return "Event type (" + options.length + ")";
    }
  }
});

$("#ODS-skill-level").multiselect({
  enableClickableOptGroups: true,
  //includeSelectAllOption: true,
  nonSelectedText: "Skill level",
  //selectAllText: "View all",
  maxHeight: 400,
  // button text test code
  buttonText: function(options, select) {
    if (
      options.length === 0 ||
      options.length === $("#ODS-skill-level option").length
    ) {
      return "Skill level";
    } else {
      return "Skill level (" + options.length + ")";
    }
  }
});

$("#ODS-price").multiselect({
  enableClickableOptGroups: true,
  //includeSelectAllOption: true,
  nonSelectedText: "Price",
  //selectAllText: "View all",
  maxHeight: 400,
  // button text test code
  buttonText: function(options, select) {
    if (
      options.length === 0 ||
      options.length === $("#ODS-price option").length
    ) {
      return "Price";
    } else {
      return "Price (" + options.length + ")";
    }
  }
});


// Reset all
$("#clearer").on("click", function() {
  // remove selected options
  $(".ods-filter option").each(function(element) {
    $(this).removeAttr("selected").prop("selected", false);
  });
  
  //refresh multiselect
  $(".ods-filter").multiselect("refresh");
});

This Pen is owned by Jason Day on CodePen.

See more by @jasonday on CodePen

External CSS

External JavaScript