From ebd154df552c1c3a4f86ae6eed1a561360d75f60 Mon Sep 17 00:00:00 2001
From: "Darrin W. Cullop" <v-dacul@microsoft.com>
Date: Mon, 18 Apr 2016 07:51:13 -0700
Subject: [PATCH 1/3] Added "setSelection" method to code, tests, and
 documentation.

The "setSelection" method allows an explicit list of options to be set.  Deselected options in the provided list will be selected and selection options that are not in the provided list be deselected.  Internally, it delegates to the "select" and "deselect" methods and gives the caller the same option for firing the onChange notification.

The testing suite has been updated to validate the new feature.  The tests make sure that the selection changes as it is supposed to, the onChange notification fires appropriately, and doesn't fire when requested not to do so.

Finally, the documentation page has been updated to show how to use this feature with working and tested examples that are based off of the other ones already provided.
---
 dist/js/bootstrap-multiselect.js    | 276 +++++++++-------
 index.html                          | 480 +++++++++++++++++----------
 tests/spec/bootstrap-multiselect.js | 489 +++++++++++++++++++---------
 3 files changed, 810 insertions(+), 435 deletions(-)

diff --git a/dist/js/bootstrap-multiselect.js b/dist/js/bootstrap-multiselect.js
index a7c71eab..42e8fe1a 100644
--- a/dist/js/bootstrap-multiselect.js
+++ b/dist/js/bootstrap-multiselect.js
@@ -1,23 +1,23 @@
 /**
  * Bootstrap Multiselect (https://github.com/davidstutz/bootstrap-multiselect)
- * 
+ *
  * Apache License, Version 2.0:
  * Copyright (c) 2012 - 2015 David Stutz
- * 
+ *
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not
  * use this file except in compliance with the License. You may obtain a
  * copy of the License at http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  * License for the specific language governing permissions and limitations
  * under the License.
- * 
+ *
  * BSD 3-Clause License:
  * Copyright (c) 2012 - 2015 David Stutz
  * All rights reserved.
- * 
+ *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are met:
  *    - Redistributions of source code must retain the above copyright notice,
@@ -28,7 +28,7 @@
  *    - Neither the name of David Stutz nor the names of its contributors may be
  *      used to endorse or promote products derived from this software without
  *      specific prior written permission.
- * 
+ *
  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
@@ -175,12 +175,12 @@
     function Multiselect(select, options) {
 
         this.$select = $(select);
-        
+
         // Placeholder via data attributes
         if (this.$select.attr("data-placeholder")) {
             options.nonSelectedText = this.$select.data("placeholder");
         }
-        
+
         this.options = this.mergeOptions($.extend({}, options, this.$select.data()));
 
         // Initialization.
@@ -197,7 +197,7 @@
         this.options.onDropdownShown = $.proxy(this.options.onDropdownShown, this);
         this.options.onDropdownHidden = $.proxy(this.options.onDropdownHidden, this);
         this.options.onInitialized = $.proxy(this.options.onInitialized, this);
-        
+
         // Build select all if enabled.
         this.buildContainer();
         this.buildButton();
@@ -212,7 +212,7 @@
         if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {
             this.disable();
         }
-        
+
         this.$select.hide().after(this.$container);
         this.options.onInitialized(this.$select, this.$container);
     }
@@ -224,24 +224,24 @@
              * Default text function will either print 'None selected' in case no
              * option is selected or a list of the selected options up to a length
              * of 3 selected options.
-             * 
+             *
              * @param {jQuery} options
              * @param {jQuery} select
              * @returns {String}
              */
             buttonText: function(options, select) {
-                if (this.disabledText.length > 0 
-                        && (this.disableIfEmpty || select.prop('disabled')) 
+                if (this.disabledText.length > 0
+                        && (this.disableIfEmpty || select.prop('disabled'))
                         && options.length == 0) {
-                    
+
                     return this.disabledText;
                 }
                 else if (options.length === 0) {
                     return this.nonSelectedText;
                 }
-                else if (this.allSelectedText 
-                        && options.length === $('option', $(select)).length 
-                        && $('option', $(select)).length !== 1 
+                else if (this.allSelectedText
+                        && options.length === $('option', $(select)).length
+                        && $('option', $(select)).length !== 1
                         && this.multiple) {
 
                     if (this.selectAllNumber) {
@@ -257,18 +257,18 @@
                 else {
                     var selected = '';
                     var delimiter = this.delimiterText;
-                    
+
                     options.each(function() {
                         var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
                         selected += label + delimiter;
                     });
-                    
+
                     return selected.substr(0, selected.length - 2);
                 }
             },
             /**
              * Updates the title of the button similar to the buttonText function.
-             * 
+             *
              * @param {jQuery} options
              * @param {jQuery} select
              * @returns {@exp;selected@call;substr}
@@ -280,7 +280,7 @@
                 else {
                     var selected = '';
                     var delimiter = this.delimiterText;
-                    
+
                     options.each(function () {
                         var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
                         selected += label + delimiter;
@@ -308,9 +308,9 @@
             },
             /**
              * Triggered on change of the multiselect.
-             * 
+             *
              * Not triggered when selecting/deselecting options manually.
-             * 
+             *
              * @param {jQuery} option
              * @param {Boolean} checked
              */
@@ -335,25 +335,25 @@
             },
             /**
              * Triggered after the dropdown is shown.
-             * 
+             *
              * @param {jQuery} event
              */
             onDropdownShown: function(event) {
-                
+
             },
             /**
              * Triggered after the dropdown is hidden.
-             * 
+             *
              * @param {jQuery} event
              */
             onDropdownHidden: function(event) {
-                
+
             },
             /**
              * Triggered on select all.
              */
             onSelectAll: function(checked) {
-                
+
             },
             /**
              * Triggered after initializing.
@@ -482,12 +482,12 @@
                     'overflow-x': 'hidden'
                 });
             }
-            
+
             if (this.options.dropUp) {
-                
+
                 var height = Math.min(this.options.maxHeight, $('option[data-role!="divider"]', this.$select).length*26 + $('option[data-role="divider"]', this.$select).length*19 + (this.options.includeSelectAllOption ? 26 : 0) + (this.options.enableFiltering || this.options.enableCaseInsensitiveFiltering ? 44 : 0));
                 var moveCalc = height + 34;
-                
+
                 this.$ul.css({
                     'max-height': height + 'px',
                     'overflow-y': 'auto',
@@ -495,13 +495,13 @@
                     'margin-top': "-" + moveCalc + 'px'
                 });
             }
-            
+
             this.$container.append(this.$ul);
         },
 
         /**
          * Build the dropdown options and binds all nessecary events.
-         * 
+         *
          * Uses createDivider and createOptionValue to create the necessary options.
          */
         buildDropdownOptions: function() {
@@ -512,7 +512,7 @@
                 // Support optgroups and options without a group simultaneously.
                 var tag = $element.prop('tagName')
                     .toLowerCase();
-            
+
                 if ($element.prop('value') === this.options.selectAllValue) {
                     return;
                 }
@@ -597,7 +597,7 @@
                         // Unselect option.
                         $option.prop('selected', false);
                     }
-                    
+
                     // To prevent select all from firing onChange: #575
                     this.options.onChange($option, checked);
                 }
@@ -618,12 +618,12 @@
                     return false;
                 }
             });
-        
+
             $('li a', this.$ul).on('touchstart click', $.proxy(function(event) {
                 event.stopPropagation();
 
                 var $target = $(event.target);
-                
+
                 if (event.shiftKey && this.options.multiple) {
                     if($target.is("label")){ // Handles checkbox selection manually (see https://github.com/davidstutz/bootstrap-multiselect/issues/431)
                         event.preventDefault();
@@ -635,39 +635,39 @@
                     if (this.lastToggledInput !== null && this.lastToggledInput !== $target) { // Make sure we actually have a range
                         var from = $target.closest("li").index();
                         var to = this.lastToggledInput.closest("li").index();
-                        
+
                         if (from > to) { // Swap the indices
                             var tmp = to;
                             to = from;
                             from = tmp;
                         }
-                        
+
                         // Make sure we grab all elements since slice excludes the last index
                         ++to;
-                        
+
                         // Change the checkboxes and underlying options
                         var range = this.$ul.find("li").slice(from, to).find("input");
-                        
+
                         range.prop('checked', checked);
-                        
+
                         if (this.options.selectedClass) {
                             range.closest('li')
                                 .toggleClass(this.options.selectedClass, checked);
                         }
-                        
+
                         for (var i = 0, j = range.length; i < j; i++) {
                             var $checkbox = $(range[i]);
 
                             var $option = this.getOptionByValue($checkbox.val());
 
                             $option.prop('selected', checked);
-                        }                   
+                        }
                     }
-                    
+
                     // Trigger the select "change" event
                     $target.trigger("change");
                 }
-                
+
                 // Remembers last clicked option
                 if($target.is("input") && !$target.closest("li").is(".multiselect-item")){
                     this.lastToggledInput = $target;
@@ -735,7 +735,7 @@
                     var allChecked = true;
                     var optionInputs = $visibleOptions.find('input');
                     var values = [];
-                    
+
                     optionInputs.each(function() {
                         allChecked = allChecked && $(this).prop('checked');
                         values.push($(this).val());
@@ -747,7 +747,7 @@
                     else {
                         this.deselect(values, false);
                     }
-                    
+
                     this.options.onChange(optionInputs, !allChecked);
                }, this));
             }
@@ -757,51 +757,51 @@
                 $("li.multiselect-group", this.$ul).siblings().not("li.multiselect-group, li.multiselect-all", this.$ul).each( function () {
                     $(this).toggleClass('hidden', true);
                 });
-                
+
                 $("li.multiselect-group", this.$ul).on("click", $.proxy(function(group) {
                     group.stopPropagation();
                 }, this));
-                
+
                 $("li.multiselect-group > a > b", this.$ul).on("click", $.proxy(function(t) {
                     t.stopPropagation();
                     var n = $(t.target).closest('li');
                     var r = n.nextUntil("li.multiselect-group");
                     var i = true;
-                    
+
                     r.each(function() {
                         i = i && $(this).hasClass('hidden');
                     });
-                    
+
                     r.toggleClass('hidden', !i);
                 }, this));
-                
+
                 $("li.multiselect-group > a > input", this.$ul).on("change", $.proxy(function(t) {
                     t.stopPropagation();
                     var n = $(t.target).closest('li');
                     var r = n.nextUntil("li.multiselect-group", ':not(.disabled)');
                     var s = r.find("input");
-                    
+
                     var i = true;
                     s.each(function() {
                         i = i && $(this).prop("checked");
                     });
-                    
+
                     s.prop("checked", !i).trigger("change");
                 }, this));
-                
+
                 // Set the initial selection state of the groups.
                 $('li.multiselect-group', this.$ul).each(function() {
                     var r = $(this).nextUntil("li.multiselect-group", ':not(.disabled)');
                     var s = r.find("input");
-                    
+
                     var i = true;
                     s.each(function() {
                         i = i && $(this).prop("checked");
                     });
-                    
+
                     $(this).find('input').prop("checked", i);
                 });
-                
+
                 // Update the group checkbox based on new selections among the
                 // corresponding children.
                 $("li input", this.$ul).on("change", $.proxy(function(t) {
@@ -811,19 +811,19 @@
                     var r2 = n.nextUntil("li.multiselect-group", ':not(.disabled)');
                     var s1 = r1.find("input");
                     var s2 = r2.find("input");
-                    
+
                     var i = $(t.target).prop('checked');
                     s1.each(function() {
                         i = i && $(this).prop("checked");
                     });
-                    
+
                     s2.each(function() {
                         i = i && $(this).prop("checked");
                     });
-                    
+
                     n.prevAll('.multiselect-group').find('input').prop('checked', i);
                 }, this));
-                
+
                 $("li.multiselect-all", this.$ul).css('background', '#f3f3f3').css('border-bottom', '1px solid #eaeaea');
                 $("li.multiselect-group > a, li.multiselect-all > a > label.checkbox", this.$ul).css('padding', '3px 20px 3px 35px');
                 $("li.multiselect-group > a > input", this.$ul).css('margin', '4px 0px 5px -20px');
@@ -858,7 +858,7 @@
             else {
                 $label.text(" " + label);
             }
-        
+
             var $checkbox = $('<input/>').attr('type', inputType);
 
             if (this.options.checkboxName) {
@@ -911,7 +911,7 @@
          *
          * @param {jQuery} group
          */
-        createOptgroup: function(group) {            
+        createOptgroup: function(group) {
             if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
                 var label = $(group).attr("label");
                 var value = $(group).attr("value");
@@ -960,14 +960,14 @@
 
         /**
          * Build the select all.
-         * 
+         *
          * Checks if a select all has already been created.
          */
         buildSelectAll: function() {
             if (typeof this.options.selectAllValue === 'number') {
                 this.options.selectAllValue = this.options.selectAllValue.toString();
             }
-            
+
             var alreadyHasSelectAll = this.hasSelectAll();
 
             if (!alreadyHasSelectAll && this.options.includeSelectAllOption && this.options.multiple
@@ -980,21 +980,21 @@
 
                 var $li = $(this.options.templates.li);
                 $('label', $li).addClass("checkbox");
-                
+
                 if (this.options.enableHTML) {
                     $('label', $li).html(" " + this.options.selectAllText);
                 }
                 else {
                     $('label', $li).text(" " + this.options.selectAllText);
                 }
-                
+
                 if (this.options.selectAllName) {
                     $('label', $li).prepend('<input type="checkbox" name="' + this.options.selectAllName + '" />');
                 }
                 else {
                     $('label', $li).prepend('<input type="checkbox" />');
                 }
-                
+
                 var $checkbox = $('input', $li);
                 $checkbox.val(this.options.selectAllValue);
 
@@ -1021,7 +1021,7 @@
 
                     this.$filter = $(this.options.templates.filter);
                     $('input', this.$filter).attr('placeholder', this.options.filterPlaceholder);
-                    
+
                     // Adds optional filter clear button
                     if(this.options.includeFilterClearBtn){
                         var clearBtn = $(this.options.templates.filterClearBtn);
@@ -1033,7 +1033,7 @@
                         }, this));
                         this.$filter.find('.input-group').append(clearBtn);
                     }
-                    
+
                     this.$ul.prepend(this.$filter);
 
                     this.$filter.val(this.query).on('click', function(event) {
@@ -1043,7 +1043,7 @@
                         if (event.which === 13) {
                           event.preventDefault();
                         }
-                        
+
                         // This is useful to catch "keydown" events after the browser has updated the control.
                         clearTimeout(this.searchTimeout);
 
@@ -1091,7 +1091,7 @@
 
                                         // Toggle current element (group or group item) according to showElement boolean.
                                         $(element).toggle(showElement).toggleClass('filter-hidden', !showElement);
-                                        
+
                                         // Differentiate groups and group items.
                                         if ($(element).hasClass('multiselect-group')) {
                                             // Remember group status.
@@ -1103,7 +1103,7 @@
                                             if (showElement) {
                                                 $(currentGroup).show().removeClass('filter-hidden');
                                             }
-                                            
+
                                             // Show all group items when group name satisfies filter.
                                             if (!showElement && currentGroupVisible) {
                                                 $(element).show().removeClass('filter-hidden');
@@ -1134,7 +1134,7 @@
          */
         refresh: function () {
             var inputs = $.map($('li input', this.$ul), $);
-            
+
             $('option', this.$select).each($.proxy(function (index, element) {
                 var $elem = $(element);
                 var value = $elem.val();
@@ -1181,10 +1181,10 @@
 
         /**
          * Select all options of the given values.
-         * 
+         *
          * If triggerOnChange is set to true, the on change event is triggered if
          * and only if one value is passed.
-         * 
+         *
          * @param {Array} selectValues
          * @param {Boolean} triggerOnChange
          */
@@ -1206,11 +1206,11 @@
                 if($option === undefined || $checkbox === undefined) {
                     continue;
                 }
-                
+
                 if (!this.options.multiple) {
                     this.deselectAll(false);
                 }
-                
+
                 if (this.options.selectedClass) {
                     $checkbox.closest('li')
                         .addClass(this.options.selectedClass);
@@ -1218,7 +1218,7 @@
 
                 $checkbox.prop('checked', true);
                 $option.prop('selected', true);
-                
+
                 if (triggerOnChange) {
                     this.options.onChange($option, true);
                 }
@@ -1239,10 +1239,10 @@
 
         /**
          * Deselects all options of the given values.
-         * 
+         *
          * If triggerOnChange is set to true, the on change event is triggered, if
          * and only if one value is passed.
-         * 
+         *
          * @param {Array} deselectValues
          * @param {Boolean} triggerOnChange
          */
@@ -1272,7 +1272,7 @@
 
                 $checkbox.prop('checked', false);
                 $option.prop('selected', false);
-                
+
                 if (triggerOnChange) {
                     this.options.onChange($option, false);
                 }
@@ -1281,7 +1281,7 @@
             this.updateButtonText();
             this.updateSelectAll();
         },
-        
+
         /**
          * Selects all enabled & visible options.
          *
@@ -1292,13 +1292,13 @@
          */
         selectAll: function (justVisible, triggerOnSelectAll) {
             justVisible = (this.options.enableCollapsibleOptGroups && this.options.multiple) ? false : justVisible;
-            
+
             var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
             var allCheckboxes = $("li input[type='checkbox']:enabled", this.$ul);
             var visibleCheckboxes = allCheckboxes.filter(":visible");
             var allCheckboxesCount = allCheckboxes.length;
             var visibleCheckboxesCount = visibleCheckboxes.length;
-            
+
             if(justVisible) {
                 visibleCheckboxes.prop('checked', true);
                 $("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").addClass(this.options.selectedClass);
@@ -1307,7 +1307,7 @@
                 allCheckboxes.prop('checked', true);
                 $("li:not(.divider):not(.disabled)", this.$ul).addClass(this.options.selectedClass);
             }
-                
+
             if (allCheckboxesCount === visibleCheckboxesCount || justVisible === false) {
                 $("option:not([data-role='divider']):enabled", this.$select).prop('selected', true);
             }
@@ -1315,12 +1315,12 @@
                 var values = visibleCheckboxes.map(function() {
                     return $(this).val();
                 }).get();
-                
+
                 $("option:enabled", this.$select).filter(function(index) {
                     return $.inArray($(this).val(), values) !== -1;
                 }).prop('selected', true);
             }
-            
+
             if (triggerOnSelectAll) {
                 this.options.onSelectAll();
             }
@@ -1328,27 +1328,27 @@
 
         /**
          * Deselects all options.
-         * 
+         *
          * If justVisible is true or not specified, only visible options are deselected.
-         * 
+         *
          * @param {Boolean} justVisible
          */
         deselectAll: function (justVisible) {
             justVisible = (this.options.enableCollapsibleOptGroups && this.options.multiple) ? false : justVisible;
             justVisible = typeof justVisible === 'undefined' ? true : justVisible;
-            
-            if(justVisible) {              
+
+            if(justVisible) {
                 var visibleCheckboxes = $("li input[type='checkbox']:not(:disabled)", this.$ul).filter(":visible");
                 visibleCheckboxes.prop('checked', false);
-                
+
                 var values = visibleCheckboxes.map(function() {
                     return $(this).val();
                 }).get();
-                
+
                 $("option:enabled", this.$select).filter(function(index) {
                     return $.inArray($(this).val(), values) !== -1;
                 }).prop('selected', false);
-                
+
                 if (this.options.selectedClass) {
                     $("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").removeClass(this.options.selectedClass);
                 }
@@ -1356,16 +1356,68 @@
             else {
                 $("li input[type='checkbox']:enabled", this.$ul).prop('checked', false);
                 $("option:enabled", this.$select).prop('selected', false);
-                
+
                 if (this.options.selectedClass) {
                     $("li:not(.divider):not(.disabled)", this.$ul).removeClass(this.options.selectedClass);
                 }
             }
         },
 
+        /**
+         * Set the current selection
+         *
+         * Helper function to set which options are currently selected by invoking
+         * 'select' for all unselected values that appear in the given list and
+         * invoking 'deselect' for all selected values that do NOT appear in the
+         * given list
+         *
+         * @param {Array} selection
+         * @param {Boolean} triggerOnChange
+         */
+        setSelected: function (selection, triggerOnChange) {
+            if (!$.isArray(selection)) {
+                selection = [selection];
+            }
+
+            // Get all of the enabled options
+            var opts = $("option:enabled", this.$select);
+            var selectedOpts = opts.filter(":selected");
+            var notSelectedOpts = opts.not(":selected");
+            var values;
+            var val;
+
+            // Find all the not-selected options
+            values = notSelectedOpts.map(function () {
+                // If their value is in the array, it should be selected so
+                // return that value (otherwise, return null to omit it from the result)
+                val = $(this).val();
+                return ($.inArray(val, selection) > -1) ? val : null;
+            }).get();
+
+            if ( values.length )
+            {
+                // Select all that need to be selected
+                this.select(values, triggerOnChange);
+            }
+
+            // Find all the selected options
+            values = selectedOpts.map(function () {
+                // If their value is NOT in the array, it should be deselected so
+                // return that value (otherwise, return null to omit it from the result)
+                val = $(this).val();
+                return ($.inArray(val, selection) == -1) ? val : null;
+            }).get();
+
+            if ( values.length )
+            {
+                // Deselect all that should not be selected
+                this.deselect(values, triggerOnChange);
+            }
+        },
+
         /**
          * Rebuild the plugin.
-         * 
+         *
          * Rebuilds the dropdown, the filter and the select all option.
          */
         rebuild: function() {
@@ -1380,14 +1432,14 @@
 
             this.updateButtonText();
             this.updateSelectAll(true);
-            
+
             if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {
                 this.disable();
             }
             else {
                 this.enable();
             }
-            
+
             if (this.options.dropRight) {
                 this.$ul.addClass('pull-right');
             }
@@ -1397,21 +1449,21 @@
          * The provided data will be used to build the dropdown.
          */
         dataprovider: function(dataprovider) {
-            
+
             var groupCounter = 0;
             var $select = this.$select.empty();
-            
+
             $.each(dataprovider, function (index, option) {
                 var $tag;
-                
+
                 if ($.isArray(option.children)) { // create optiongroup tag
                     groupCounter++;
-                    
+
                     $tag = $('<optgroup/>').attr({
                         label: option.label || 'Group ' + groupCounter,
                         disabled: !!option.disabled
                     });
-                    
+
                     forEach(option.children, function(subOption) { // add children option tags
                         $tag.append($('<option/>').attr({
                             value: subOption.value,
@@ -1433,10 +1485,10 @@
                     });
                     $tag.text(option.label || option.value);
                 }
-                
+
                 $select.append($tag);
             });
-            
+
             this.rebuild();
         },
 
@@ -1496,7 +1548,7 @@
                 var checkedBoxesLength = allBoxes.filter(":checked").length;
                 var selectAllLi  = $("li.multiselect-all", this.$ul);
                 var selectAllInput = selectAllLi.find("input");
-                
+
                 if (checkedBoxesLength > 0 && checkedBoxesLength === allBoxesLength) {
                     selectAllInput.prop("checked", true);
                     selectAllLi.addClass(this.options.selectedClass);
@@ -1519,7 +1571,7 @@
          */
         updateButtonText: function() {
             var options = this.getSelected();
-            
+
             // First update the displayed button text.
             if (this.options.enableHTML) {
                 $('.multiselect .multiselect-selected-text', this.$container).html(this.options.buttonText(options, this.$select));
@@ -1527,7 +1579,7 @@
             else {
                 $('.multiselect .multiselect-selected-text', this.$container).text(this.options.buttonText(options, this.$select));
             }
-            
+
             // Now update the title attribute of the button.
             $('.multiselect', this.$container).attr('title', this.options.buttonTitle(options, this.$select));
         },
@@ -1613,7 +1665,7 @@
             // Call multiselect method.
             if (typeof option === 'string') {
                 data[option](parameter, extraOptions);
-                
+
                 if (option === 'destroy') {
                     $(this).data('multiselect', false);
                 }
diff --git a/index.html b/index.html
index 2574868b..69de2b31 100644
--- a/index.html
+++ b/index.html
@@ -46,19 +46,19 @@
                     <div class="page-header">
                         <h1>Bootstrap Multiselect</h1>
                     </div>
-                    
+
                     <p class="alert alert-warning">
                         <b>Some option names may have changed during the last few commits!</b>
                     </p>
-                    
+
                     <p class="alert alert-info">
                         <b>Please consult the <a href="#faq">FAQ</a> and the <a href="https://github.com/davidstutz/bootstrap-multiselect/issues">Issue Tracker</a> before creating a new issue.</b>
                     </p>
-                    
+
                     <p class="alert alert-info">
                         <b>Please have a look at <a href="#how-to-contribute">How to contribute?</a> and the <a href="https://github.com/davidstutz/bootstrap-multiselect/issues">Issue Tracker</a>.</b>
                     </p>
-                    
+
                     <div class="page-header">
                         <h2 id="getting-started">Getting Started</h2>
                     </div>
@@ -147,11 +147,11 @@ <h3>Call the Plugin</h3>
                             </div>
                         </li>
                     </ol>
-                    
+
                     <div class="page-header">
                         <h2 id="configuration-options">Configuration Options</h2>
                     </div>
-                    
+
                     <table class="table table-condensed">
                         <thead>
                             <tr>
@@ -233,11 +233,11 @@ <h2 id="configuration-options">Configuration Options</h2>
                             </tr>
                         </tbody>
                     </table>
-                    
+
                     <p class="alert alert-info">
                         Use Firebug, Chrome Developer Tools to get the best out of the below examples.
                     </p>
-                    
+
                     <table class="table">
                         <tbody>
                             <tr>
@@ -246,7 +246,7 @@ <h2 id="configuration-options">Configuration Options</h2>
                                     <p>
                                         <code>multiple</code> is not a real configuration option. It refers to the <code>multiple</code> attribute of the <code>select</code> the plugin is applied on. When the <code>multiple</code> attribute of the <code>select</code> is present, the plugin uses checkboxes to allow multiple selections. If it is not present, the plugin uses radio buttons to allow single selections. When using the plugin for single selections (without the <code>multiple</code> attribute present), the first option will automatically be selected if no other option is selected in advance. See <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/129">#129</a> for how to avoid this behavior.
                                     </p>
-                                    
+
                                     <p>
                                         The following example shows the default behavior when the <code>multiple</code> attribute is omitted:
                                     </p>
@@ -282,11 +282,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/select&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>
                                         If multiple options are selected in advance and the <code>select</code> lacks the <code>multiple</code> attribute, the last option marked as <code>selected</code> will initially be selected by the plugin.
                                     </p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -319,11 +319,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/select&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>
                                         The following example shows the default behavior when the <code>multiple</code> attribute is present. Initially selected options will be adopted automatically:
                                     </p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -355,7 +355,7 @@ <h2 id="configuration-options">Configuration Options</h2>
     &lt;option value="6"&gt;Option 6&lt;/option&gt;
 &lt;/select&gt;
 </pre>
-                                    
+
                                     <p>
                                         The plugin naturally supports <code>optgroup</code>'s, however the group headers are not clickable by default. See the <code>enableClickableOptGroups</code> option for details.
                                     </p>
@@ -496,11 +496,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>
                                         Note that this option does also work with disabled options:
                                     </p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -534,11 +534,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>
                                         Note that the behavior of <code>onChange</code> changes. Whenever an optgroup is changed/clicked, the <code>onChange</code> event is fired with all affected options as first parameter.
                                     </p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -680,11 +680,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>
                                         The <code>disabledText</code> option does also work when the underlying <code>select</code> is disabled:
                                     </p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -721,11 +721,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/select&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>
                                         Note that selected options will still be shown:
                                     </p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -809,11 +809,11 @@ <h2 id="configuration-options">Configuration Options</h2>
                                     <p>
                                         The dropdown can also be dropped up. Note that it is recommended to also set <code>maxHeight</code>. The plugin calculates the necessary height of the dropdown and takes the minimum of the calculated value and <code>maxHeight</code>.
                                     </p>
-                                    
+
                                     <p class="alert alert-warning">
                                         Note that this feature has been introduced in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/594">#594</a> and is known to have issues depending on the environment.
                                     </p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -988,7 +988,7 @@ <h2 id="configuration-options">Configuration Options</h2>
                                     <p class="alert alert-warning">
                                         Note that the behavior of <code>onChange</code> changes when setting <code>enableClickableOptGroups</code> to <code>true</code>.
                                     </p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -1088,7 +1088,7 @@ <h2 id="configuration-options">Configuration Options</h2>
                                     <p>
                                         A callback called when the dropdown is shown.
                                     </p>
-                                    
+
                                     <p class="alert alert-warning">
                                         The <code>onDropdownShow</code> option is not available when using Twitter Bootstrap 2.3.
                                     </p>
@@ -1137,7 +1137,7 @@ <h2 id="configuration-options">Configuration Options</h2>
                                     <p class="alert alert-warning">
                                         The <code>onDropdownHide</code> option is not available when using Twitter Bootstrap 2.3.
                                     </p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -1182,7 +1182,7 @@ <h2 id="configuration-options">Configuration Options</h2>
                                     <p class="alert alert-warning">
                                         The <code>onDropdownShown</code> option is not available when using Twitter Bootstrap 2.3.
                                     </p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -1227,7 +1227,7 @@ <h2 id="configuration-options">Configuration Options</h2>
                                     <p class="alert alert-warning">
                                         The <code>onDropdownHidden</code> option is not available when using Twitter Bootstrap 2.3.
                                     </p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -1408,9 +1408,9 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>Note that if the text in the button title is too long, it will be truncated and use an ellipsis</p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -1439,11 +1439,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>
                                         This does also work for long options:
                                     </p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -1719,11 +1719,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>
                                         This option may be useful in combination with the <code>includeSelectAllOption</code>:
                                     </p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -1754,11 +1754,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>
                                         Note that the <code>allSelectedText</code> is not shown if only one option is available.
                                     </p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -1852,7 +1852,7 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;script type=&quot;text/javascript&quot;&gt;
     $(document).ready(function() {
         $('#example-delimiterText').multiselect({
-            delimiterText '; ' 
+            delimiterText '; '
         });
     });
 &lt;/script&gt;
@@ -1922,7 +1922,7 @@ <h2 id="configuration-options">Configuration Options</h2>
                                                 $('#example-optionClass').multiselect({
                                                     optionClass: function(element) {
                                                         var value = $(element).val();
-                                                        
+
                                                         if (value%2 == 0) {
                                                             return 'even';
                                                         }
@@ -2047,7 +2047,7 @@ <h2 id="configuration-options">Configuration Options</h2>
                                     <p class="alert alert-info">
                                         To see an example using both the select all option and the filter, see the documentation of the <code>enableFiltering</code> option.
                                     </p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -2076,11 +2076,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>
                                         The <code>includeSelectAllOption</code> option can also be used in combination with <code>optgroup</code>'s.
                                     </p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -2113,11 +2113,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>
                                         Note that the select all does not trigger the <code>onChange</code> event and only triggers the <code>onSelectAll</code> event:
                                     </p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -2162,7 +2162,7 @@ <h2 id="configuration-options">Configuration Options</h2>
                                     <p>
                                         Setting both <code>includeSelectAllOption</code> and <code>enableFiltering</code> to <code>true</code>, the select all option does always select only the visible option. With setting <code>selectAllJustVisible</code> to <code>false</code> this behavior is changed such that always all options (irrespective of whether they are visible) are selected.
                                     </p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -2277,9 +2277,9 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>The <code>selectAllValue</code> option should usually be a string, however, numeric values work as well:</p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -2483,11 +2483,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>
                                         The <code>enableFiltering</code> option can easily be used in combination with the <code>includeSelectAllOption</code> option:
                                     </p>
-                                    
+
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -2527,7 +2527,7 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>
                                         The <code>enableFiltering</code> option can also be used in combination with <code>optgroup</code>'s.
                                     </p>
@@ -2563,7 +2563,7 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>
                                         Clickable <code>optgroup</code>'s are also supported:
                                     </p>
@@ -2601,7 +2601,7 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>
                                         Finally, the option can also be used together with <code>onChange</code> or similar events:
                                     </p>
@@ -2896,20 +2896,20 @@ <h2 id="configuration-options">Configuration Options</h2>
                     <div class="page-header">
                         <h2 id="templates">Templates</h2>
                     </div>
-                    
-                    
+
+
                     <p>
                         The generated HTML markup can be controlled using templates. Basically, templates are simple configuration options. The default templates are shown below:
                     </p>
-                    
+
                     <p class="alert alert-warning">
                         However, note that messing with the template's classes may cause unexpected behavior. For example the button should always have the class <code>.multiselect</code>,
                     </p>
-                    
+
                     <p class="alert alert-info">
                         In addition, note that other options may also have influence on the templates, for example the <code>buttonClass</code> option.
                     </p>
-                    
+
 <pre class="prettyprint linenums">
 &lt;script type=&quot;text/javascript&quot;&gt;
     $(document).ready(function() {
@@ -2927,11 +2927,11 @@ <h2 id="templates">Templates</h2>
     });
 &lt;/script&gt;
 </pre>
-                    
+
                     <p>
                         For example other elements instead of buttons may be used by adapting the template:
                     </p>
-                    
+
                     <div class="example">
                         <script type="text/javascript">
                             $(document).ready(function() {
@@ -2983,7 +2983,7 @@ <h2 id="templates">Templates</h2>
 &lt;/style&gt;
 </pre>
                     </div>
-                    
+
                     <div class="page-header">
                         <h2 id="methods">Methods</h2>
                     </div>
@@ -3235,11 +3235,11 @@ <h2 id="methods">Methods</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>
                                         The method provides an additional parameter: <code>.multiselect('select', value, triggerOnChange)</code>. If the second parameter is set to true, the method will manually trigger the <code>onChange</code> option.
                                     </p>
-                                    
+
                                     <div class="example">
                                         <div class="btn-group">
                                             <script type="text/javascript">
@@ -3285,11 +3285,11 @@ <h2 id="methods">Methods</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>
                                         The above parameter does also work when selecting multipe values. Note that <code>onChange</code> is called for each selected option individually!
                                     </p>
-                                    
+
                                     <div class="example">
                                         <div class="btn-group">
                                             <script type="text/javascript">
@@ -3387,11 +3387,11 @@ <h2 id="methods">Methods</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>
                                         The method provides an additional parameter: <code>.multiselect('deselect', value, triggerOnChange)</code>. If the second parameter is set to true, the method will manually trigger the <code>onChange</code> option.
                                     </p>
-                                    
+
                                     <div class="example">
                                         <div class="btn-group">
                                             <script type="text/javascript">
@@ -3437,11 +3437,11 @@ <h2 id="methods">Methods</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>
                                         The above parameter does also work when deselecting multiple options. Note that <code>onChange</code> is called for each deselected option individually.
                                     </p>
-                                    
+
                                     <div class="example">
                                         <div class="btn-group">
                                             <script type="text/javascript">
@@ -3485,6 +3485,160 @@ <h2 id="methods">Methods</h2>
         });
     });
 &lt;/script&gt;
+</pre>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <code>.multiselect('setSelected', selection)</code>
+                                </td>
+                                <td>
+                                    <p>
+                                        Explicitly sets which options are selected (also works with an array of values).  Any currently selected options
+                                        that do not appear in the given array will be deselected.  Any deselected options that do appear in the given array
+                                        will be selected.
+                                    </p>
+
+                                    <div class="example">
+                                        <div class="btn-group">
+                                            <script type="text/javascript">
+                                                $(document).ready(function() {
+                                                    $('#example-setSelected').multiselect();
+
+                                                    $('#example-setSelected-button').on('click', function() {
+                                                        $('#example-setSelected').multiselect('setSelected', ['1', '2', '4']);
+
+                                                        alert('Selected 1, 2 and 4.  Deselected 3, 5, and 6.');
+                                                    });
+                                                });
+                                            </script>
+                                            <div class="btn-group">
+                                                <select id="example-setSelected" multiple="multiple">
+                                                    <option value="1">Option 1</option>
+                                                    <option value="2">Option 2</option>
+                                                    <option value="3" selected="selected">Option 3</option>
+                                                    <option value="4">Option 4</option>
+                                                    <option value="5" selected="selected">Option 5</option>
+                                                    <option value="6" selected="selected">Option 6</option>
+                                                </select>
+                                                <button id="example-setSelected-button" class="btn btn-default">Set the Selection...</button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="highlight">
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+    $(document).ready(function() {
+        $('#example-setSelected').multiselect();
+
+        $('#example-setSelected-button').on('click', function() {
+            $('#example-setSelected').multiselect('setSelected', ['1', '2', '4']);
+
+            alert('Selected 1, 2 and 4.  Deselected 3, 5, and 6.');
+        });
+    });
+&lt;/script&gt;
+</pre>
+                                    </div>
+
+                                    <p>
+                                        The method provides an additional parameter: <code>.multiselect('setSelected', selection, triggerOnChange)</code>. If the third parameter is set to true, the method will manually trigger the <code>onChange</code> option.
+                                    </p>
+
+                                    <div class="example">
+                                        <div class="btn-group">
+                                            <script type="text/javascript">
+                                                $(document).ready(function() {
+                                                    $('#example-setSelected-onChange').multiselect({
+                                                        onChange: function(option, checked, select) {
+                                                            alert('onChange triggered: ' + $(option).val() + ' was ' + (checked ? '' : 'de') + 'selected.');
+                                                        }
+                                                    });
+
+                                                    $('#example-setSelected-onChange-button').on('click', function() {
+                                                        $('#example-setSelected-onChange').multiselect('setSelected', '1', true);
+                                                    });
+                                                });
+                                            </script>
+                                            <div class="btn-group">
+                                                <select id="example-setSelected-onChange" multiple="multiple">
+                                                    <option value="1">Option 1</option>
+                                                    <option value="2" selected="selected">Option 2</option>
+                                                    <option value="3">Option 3</option>
+                                                    <option value="4">Option 4</option>
+                                                    <option value="5">Option 5</option>
+                                                    <option value="6">Option 6</option>
+                                                </select>
+                                                <button id="example-setSelected-onChange-button" class="btn btn-default">Set Selected</button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="highlight">
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+    $(document).ready(function() {
+        $('#example-setSelected-onChange').multiselect({
+            onChange: function(option, checked, select) {
+                alert('onChange triggered: ' + $(option).val() + ' was ' + (checked ? '' : 'de') + 'selected.');
+            }
+        });
+
+        $('#example-setSelected-onChange-button').on('click', function() {
+            $('#example-setSelected-onChange').multiselect('setSelected', '1', true);
+        });
+    });
+&lt;/script&gt;
+</pre>
+                                    </div>
+
+                                    <p>
+                                        The above parameter also works when multiple options change (selected or deselected). Note that <code>onChange</code> is called for each selected and deselected option individually.
+                                    </p>
+
+                                    <div class="example">
+                                        <div class="btn-group">
+                                            <script type="text/javascript">
+                                                $(document).ready(function() {
+                                                    $('#example-setSelected-onChange-array').multiselect({
+                                                        onChange: function(option, checked, select) {
+                                                            alert('onChange triggered: ' + $(option).val() + ' was ' + (checked ? '' : 'de') + 'selected.');
+                                                        }
+                                                    });
+
+                                                    $('#example-setSelected-onChange-array-button').on('click', function() {
+                                                        $('#example-setSelected-onChange-array').multiselect('setSelected', ['2', '4'], true);
+                                                    });
+                                                });
+                                            </script>
+                                            <div class="btn-group">
+                                                <select id="example-setSelected-onChange-array" multiple="multiple">
+                                                    <option value="1" selected="selected">Option 1</option>
+                                                    <option value="2">Option 2</option>
+                                                    <option value="3" selected="selected">Option 3</option>
+                                                    <option value="4">Option 4</option>
+                                                    <option value="5">Option 5</option>
+                                                    <option value="6">Option 6</option>
+                                                </select>
+                                                <button id="example-setSelected-onChange-array-button" class="btn btn-default">Change Multiple Selections</button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="highlight">
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+    $(document).ready(function() {
+        $('#example-setSelected-onChange-array').multiselect({
+            onChange: function(option, checked, select) {
+                alert('onChange triggered: ' + $(option).val() + ' was ' + (checked ? '' : 'de') + 'selected.');
+            }
+        });
+
+        $('#example-setSelected-onChange-array-button').on('click', function() {
+            $('#example-setSelected-onChange-array').multiselect('setSelected', ['2','4'], true);
+        });
+    });
+&lt;/script&gt;
 </pre>
                                     </div>
                                 </td>
@@ -3501,11 +3655,11 @@ <h2 id="methods">Methods</h2>
                                     <p class="alert alert-info">
                                         Note that setting <code>justVisible</code> to <code>true</code>, or providing no parameter will select all visible options, that is the dropdown needs to be opened.
                                     </p>
-                                    
+
                                     <p class="alert alert-info">
                                         Currently, it is required to call <code>.multiselect('updateButtonText')</code> manually after calling <code>.multiselect('selectAll', justVisible)</code>.
                                     </p>
-                                    
+
                                     <div class="example">
                                         <div class="btn-group">
                                             <script type="text/javascript">
@@ -3568,11 +3722,11 @@ <h2 id="methods">Methods</h2>
                                     <p class="alert alert-info">
                                         Note that setting <code>justVisible</code> to <code>true</code>, or providing no parameter will select all visible options, that is the dropdown needs to be opened.
                                     </p>
-                                    
+
                                     <p class="alert alert-info">
                                         Currently, it is required to call <code>.multiselect('updateButtonText')</code> manually after calling <code>.multiselect('selectAll', justVisible)</code>.
                                     </p>
-                                    
+
                                     <div class="example">
                                         <div class="btn-group">
                                             <script type="text/javascript">
@@ -3631,11 +3785,11 @@ <h2 id="methods">Methods</h2>
                                     <p>
                                         When manually selecting/deselecting options and the corresponding checkboxes, this function updates the text and title of the button.
                                     </p>
-                                    
+
                                     <p class="alert alert-info">
                                         Note that usually this method is only needed when using <code>.multiselect('selectAll', justVisible)</code> or <code>.multiselect('deselectAll', justVisible)</code>. In all other cases, <code>.multiselect('refresh')</code> should be used.
                                     </p>
-                                    
+
                                     <div class="example">
                                         <div class="btn-group">
                                             <script type="text/javascript">
@@ -3647,10 +3801,10 @@ <h2 id="methods">Methods</h2>
                                                     $('#example-updateButtonText-select').on('click', function() {
                                                         $('option[value="1"]', $('#example-updateButtonText')).prop('selected', true);
                                                         $('option[value="3"]', $('#example-updateButtonText')).prop('selected', true);
-                                                        
+
                                                         $('input[value="1"]', $('#example-updateButtonText-container')).prop('checked', true);
                                                         $('input[value="3"]', $('#example-updateButtonText-container')).prop('checked', true);
-                                                        
+
                                                         $('input[value="1"]', $('#example-updateButtonText-container')).closest('li').addClass('active');
                                                         $('input[value="3"]', $('#example-updateButtonText-container')).closest('li').addClass('active');
                                                     });
@@ -3680,7 +3834,7 @@ <h2 id="methods">Methods</h2>
         $('#example-deselectAll').multiselect();
 
         $('#example-deselectAll-visible').on('click', function() {
-            
+
             $('#example-deselectAll').multiselect('updateButtonText', true);
         });
     });
@@ -3940,11 +4094,11 @@ <h2 id="methods">Methods</h2>
 &lt;select id=&quot;example-dataprovider&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
 </pre>
                                     </div>
-                                    
+
                                     <p>
                                         The method is also able to handle <code>optgroup</code>'s:
                                     </p>
-                                    
+
                                     <div class="example">
                                         <div class="btn-group">
                                             <script type="text/javascript">
@@ -4015,17 +4169,17 @@ <h2 id="methods">Methods</h2>
                                             <script type="text/javascript">
                                                 $(document).ready(function() {
                                                     $('#example-set-all-selected-text').multiselect({allSelectedText: "Initial All Selected"});
-                                                    
+
                                                     $('#new-all-selected-text-btn').click(function(){
-                                                        $('#example-set-all-selected-text').multiselect('setAllSelectedText', $('#new-all-selected-text-box').val());                                                        
+                                                        $('#example-set-all-selected-text').multiselect('setAllSelectedText', $('#new-all-selected-text-box').val());
                                                     });
                                                 });
                                             </script>
-                                            
+
                                             <select id="example-set-all-selected-text" multiple="multiple">
                                                 <option value="1" selected>Option 1</option>
                                             </select>
-                                            
+
                                             <input id="new-all-selected-text-box" type="text" class="form-control" placeholder="Enter new text"/>
                                             <input id="new-all-selected-text-btn" type="button" class="btn btn-default" value="Change All Selected Text"/>
                                         </div>
@@ -4034,9 +4188,9 @@ <h2 id="methods">Methods</h2>
 <pre class="prettyprint linenums">
 &lt;script type=&quot;text/javascript&quot;&gt;
     $('#example-set-all-selected-text').multiselect({allSelectedText: "Initial All Selected"});
-                                                    
+
     $('#new-all-selected-text-btn').click(function(){
-        $('#example-set-all-selected-text').multiselect('setAllSelectedText', $('#new-all-selected-text-box').val());                                                        
+        $('#example-set-all-selected-text').multiselect('setAllSelectedText', $('#new-all-selected-text-box').val());
     });
 &lt;/script&gt;
 </pre>
@@ -4108,7 +4262,7 @@ <h2 id="further-examples">Further Examples</h2>
                     </div>
 
                     <p>
-                        The above approach can also be adapted to be used in 
+                        The above approach can also be adapted to be used in
                     </p>
 
                     <div class="example">
@@ -4157,7 +4311,7 @@ <h2 id="further-examples">Further Examples</h2>
 &lt;/script&gt;
 </pre>
                     </div>
-                    
+
                     <p>
                         Limit the number of selected options using the <code>onChange</code> option. The user may only select a maximum of 4 options. Then all other options are disabled.
                     </p>
@@ -4441,7 +4595,7 @@ <h2 id="further-examples">Further Examples</h2>
                     <p>
                         Using a reset button together with a multiselect.
                     </p>
-                    
+
                     <div class="example">
                         <script type="text/javascript">
                             $(document).ready(function() {
@@ -4498,11 +4652,11 @@ <h2 id="further-examples">Further Examples</h2>
 &lt;/form&gt;
 </pre>
                     </div>
-                    
+
                     <p>
                         Multiselect can also be used in modals:
                     </p>
-                    
+
                     <div class="example">
                         <script type="text/javascript">
                             $(document).ready(function() {
@@ -4561,15 +4715,15 @@ <h4 class="modal-title">Bootstrap Multiselect</h4>
 &lt;/div&gt;
 </pre>
                     </div>
-                    
+
                     <p>
                         An example of using multiselect in an accordion/collapse:
                     </p>
-                    
+
                     <p class="alert alert-info">
                         Note that the overflow of the <code>.panel</code> needs to be visible: <code>style="overflow:visible;"</code>. See the example below.
                     </p>
-                    
+
                     <div class="example">
                         <script type="text/javascript">
                             $(document).ready(function() {
@@ -4632,7 +4786,7 @@ <h4 class="panel-title">
 &lt;/div&gt;
 </pre>
                     </div>
-                    
+
                     <p>
                         The examples below are aimed to demonstrate the performance of several features when using a large number of options:
                     </p>
@@ -4642,25 +4796,25 @@ <h4 class="panel-title">
                         <li>Additionally using <code>enableClickableOptGroups</code>.</li>
                         <li>Resetting the multiselect.</li>
                     </ul>
-                    
+
                     <p class="alert alert-warning">
                         The below examples need to be activated. <b>Note that this may take some time!</b><br>
                     </p>
-                    
+
                     <p class="alert alert-info">
                         Use <input type="text" id="example-large-options" value="1000" style="width: 50px;margin: 0px 4px;"/> options: <button id="example-large-enable" class="btn btn-primary">Enable Examples</button>
                     </p>
-                    
+
                     <div id="example-large-error">
-                        
+
                     </div>
-                    
+
                     <div class="example">
                         <script type="text/javascript">
                             $(document).ready(function() {
                                 $('#example-large-enable').on('click', function() {
                                     var options = $('#example-large-options').val();
-                                    
+
                                     if (options < 1 || options > 5000) {
                                         $('#example-large-error').html('<p class="alert alert-error">Choose between 1 and 5000 options!</p>');
                                     }
@@ -4669,19 +4823,19 @@ <h4 class="panel-title">
                                         $('#example-large-includeSelectAllOption-enableFiltering').html('');
                                         $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').html('');
                                         $('#example-large-reset').html('');
-                                        
+
                                         for (var j = 0; j < options; j++) {
                                             i = j + 1;
                                             $('#example-large-includeSelectAllOption').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
                                             $('#example-large-includeSelectAllOption-enableFiltering').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
-                                            
+
                                             var group = Math.floor(j/10) + 1;
                                             var number = j % 10 + 1;
                                             if (number === 1) {
                                                 $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').append('<optgroup label="Group ' + group.toString() + '"></optgroup>');
                                             }
                                             $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').append('<option value="' + group.toString() + '-' + number.toString() + '">Option ' + group.toString() + '.' + number.toString() + '</option>');
-                                            
+
                                             $('#example-large-reset').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
                                         }
 
@@ -4839,13 +4993,13 @@ <h4 class="panel-title">
 &lt;/form&gt;
 </pre>
                     </div>
-                    
+
                     <p>The following examples is aimed to demonstrate the performance of the <code>.multiselect('dataprovider', data)</code> for a large number of options.</p>
-                    
+
                     <p class="alert alert-warning">The below examples need to be activated. <b>Note that this may take some time!</b></p>
-                    
+
                     <p class="alert alert-info"><button id="example-large-dataprovider-button" class="btn btn-primary">Activate</button></p>
-                    
+
                     <div class="example">
                         <script type="text/javascript">
                             $(document).ready(function() {
@@ -4858,10 +5012,10 @@ <h4 class="panel-title">
                                             value: i + '-' + j
                                         });
                                     }
-                                    
+
                                     data.push(group);
                                 }
-                                
+
                                 $('#example-large-dataprovider-button').on('click', function() {
                                     $('#example-large-dataprovider').multiselect({
                                         maxHeight: 200
@@ -4898,11 +5052,11 @@ <h4 class="panel-title">
 &lt;p class=&quot;alert alert-info&quot;&gt;&lt;button id=&quot;example-large-dataprovider-button&quot; class=&quot;btn btn-primary&quot;&gt;Activate&lt;/button&gt;&lt;/p&gt;
 &lt;select id=&quot;example-large-dataprovider&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
 </pre>
-                    
+
                     <p>
                         The following example illsutrates how to disable options using JavaScript.
                     </p>
-                    
+
                     <div class="example">
                         <script type="text/javascript">
                             $(document).ready(function() {
@@ -4950,15 +5104,15 @@ <h4 class="panel-title">
 });
 &lt;select id=&quot;example-disable-javascript&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
 </pre>
-                        
+
                     <p>
                         Performance example for using <code>.multiselect('refresh')</code> with a large number of options:
                     </p>
 
                     <p class="alert alert-warning">The below examples need to be activated. <b>Note that this may take some time!</b></p>
-                    
+
                     <p class="alert alert-info"><button id="example-large-refresh-button" class="btn btn-primary">Activate</button></p>
-                    
+
                     <div class="example">
                         <script type="text/javascript">
                             $(document).ready(function() {
@@ -4966,34 +5120,34 @@ <h4 class="panel-title">
                                     for (var i = 0; i < 1000; i++) {
                                         $('#example-large-refresh').append('<option value="' + i + '">Option ' + i + '</option>');
                                     }
-                                    
+
                                     $('#example-large-refresh').multiselect();
                                 });
-                                
+
                                 $('#example-large-refresh-refresh').on('click', function() {
                                     $('#example-large-refresh').multiselect('refresh');
                                 });
-                                
+
                                 $('#example-large-refresh-select').on('click', function() {
                                     var count = 0;
-                                    
+
                                     $('#example-large-refresh option').each(function() {
                                         var i = $(this).val();
-                                        
+
                                         if (i%2 == 0) {
                                             $(this).prop('selected', true);
                                             count++;
                                         }
-                                        
+
                                     });
-                                    
+
                                     alert('Selected ' + count + ' options!');
                                 });
                             });
                         </script>
                         <div class="btn-group">
                             <select id="example-large-refresh" multiple="multiple">
-                                
+
                             </select>
                             <button id="example-large-refresh-select" class="btn btn-default">Select every second option ...</button>
                             <button id="example-large-refresh-refresh" class="btn btn-primary">Refresh!</button>
@@ -5034,19 +5188,19 @@ <h4 class="panel-title">
 &lt;/script&gt;
 </pre>
                     </div>
-                        
+
                     <div class="page-header">
                         <h2 id="post">Server-Side Processing</h2>
                     </div>
-                    
+
                     <p class="alert alert-warning">
                         The below example uses a PHP script to demonstrate Server-Side Processing. Therefore, the below example will not run online - <b>download the repository and try it on a local server</b>.
                     </p>
-                    
+
                     <p>
                         In order to receive the correct data after submitting the form, the used <code>select</code> has to have an appropriate name. Note that an <code>[]</code> needs to be appended to the name when using the <code>multiple</code> option/attribute. Per default, the checkboxes used within the multiselect will not be submitted, however, this can be changed by adapting <code>checkboxName</code>. The select all option as well as the text input used for the filter will not be submitted. As this may be useful, the name of the select all checkbox may be adapted using the <code>selectAllName</code> option. The value of the select all checkbox can be controlled by the <code>selectAllValue</code> option while the values of the remaining checkboxes correspond to the values used by the <code>option</code>'s of the original <code>select</code>.
                     </p>
-                    
+
                     <div class="example">
                         <script type="text/javascript">
                             $(document).ready(function() {
@@ -5167,11 +5321,11 @@ <h2 id="post">Server-Side Processing</h2>
 &lt;/form&gt;
 </pre>
                     </div>
-                    
+
                     <div class="page-header">
                         <h2 id="keyboard-support">Keyboard Support</h2>
                     </div>
-                    
+
                     <table class="table table-striped">
                         <tbody>
                             <tr>
@@ -5188,11 +5342,11 @@ <h2 id="keyboard-support">Keyboard Support</h2>
                             </tr>
                         </tbody>
                     </table>
-                    
+
                     <div class="page-header">
                         <h2 id="faq">Frequently Asked Questions</h2>
                     </div>
-                    
+
                     <dl>
                         <dt id="how-to-contribute">How to contribute?</dt>
                         <dd>
@@ -5205,42 +5359,42 @@ <h2 id="faq">Frequently Asked Questions</h2>
                             </ul>
                             A full list of contributors can be found <a href="https://github.com/davidstutz/bootstrap-multiselect/graphs/contributors">here</a>.
                         </dd>
-                        
+
                         <dt>How about older browsers as for example Internet Explorer 6, 7 and 8?</dt>
                         <dd>
                             With version 2.0, jQuery no longer supports the older IE versions. Nevertheless, the plugin should run as expected using the 1.x branch of jQuery. See <a href="http://blog.jquery.com/2013/04/18/jquery-2-0-released/">here</a> for details.
                         </dd>
-                        
+
                         <dt>May I use the plugin in a commercial project (e.g. a commercial Wordpress/Joomla theme)?</dt>
                         <dd>
                             The plugin is dual licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a> and the <a href="http://opensource.org/licenses/BSD-3-Clause">BSD 3-Clause License</a>. The BSD 3-Clause License allows to use the plugin in commercial projects as long as all source files associated with this plugin retain the copyright notice.
                         </dd>
-                        
+
                         <dt>Using <code>return false;</code> within the <code>onChange</code> option does not prevent the option from being selected/deselected ...</dt>
                         <dd>
                             The <code>return</code> statement within the <code>onChange</code> method has no influence on the result. For preventing an option from being deselected or selected have a look at the examples in the <a href="#further-examples">Further Examples</a> section.
                         </dd>
-                        
+
                         <dt>How to change the button class depending on the number of selected options?</dt>
                         <dd>
                             This issue is addressed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/332">332</a>.
                         </dd>
-                        
+
                         <dt>Why does the plugin crash when using <code>.multiselect('select', value);</code> or <code>.multiselect('deselect', value);</code>?</dt>
                         <dd>
                             This may be caused when the class used for the <code>select</code> occurs for other elements, as well. In addition this may be caused if the multiselect has the class <code>.multiselect</code>. See <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/330">#330</a>.
                         </dd>
-                        
+
                         <dt>How to check whether filtering all options resulted no options being displayed (except the select all option)?</dt>
                         <dd>
                             This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/317">#317</a>.
                         </dd>
-                        
+
                         <dt>How to use multiple plugin instances running single selections on one page?</dt>
                         <dd>
                             There is a minor bug when using multiple plugin instances with single selection on one page. The bug is described here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/331">#331</a>. A possible fix is suggested here: <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/336">#336</a>.
                         </dd>
-                        
+
                         <dt>How to use the plugin within a <code>form.form-inline</code>?</dt>
                         <dd>
                             This issue is addressed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/322">#322</a>
@@ -5270,17 +5424,17 @@ <h2 id="faq">Frequently Asked Questions</h2>
 });
 </pre>
                         </dd>
-                        
+
                         <dt>Why does the plugin not work in Chrome for Mobile?</dt>
                         <dd>
                             This may be caused by several reasons one of which is described and resolved here: <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/223">#223</a>.
                         </dd>
-                        
+
                         <dt>How to underline the searched text when using the filter?</dt>
                         <dd>
                             This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/309">#309</a>.
                         </dd>
-                        
+
                         <dt>How to hide the checkboxes?</dt>
                         <dd>
                             A related issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/205">#205</a> and includes a possible solution when using CSS to hide the checkboxes:
@@ -5290,7 +5444,7 @@ <h2 id="faq">Frequently Asked Questions</h2>
 }
 </pre>
                         </dd>
-                        
+
                         <dt>How to use Bootstrap Multiselect using <code>$.validate</code>?</dt>
                         <dd>
                             This topic is discussed in issue <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/347">#347</a>. The fix suggested is as follows:
@@ -5300,27 +5454,27 @@ <h2 id="faq">Frequently Asked Questions</h2>
 validator.settings.ignore = ':hidden:not(".multiselect")';
 </pre>
                         </dd>
-                        
+
                         <dt>How to prevent the plugin from selecting the first option in single select mode?</dt>
                         <dd>
                             This issue is mainly due to the default behavior of most browsers. A workaround can be found here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/129">#129</a>.
                         </dd>
-                        
+
                         <dt>Which are the minimum required components of Twitter Botostrap to get the plugin working?</dt>
                         <dd>
                             The plugin needs at least the styles for forms and dropdowns. In addition the JavaScript dropdown plugin from Twitter Bootstrap is required. Details can be found here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/344">#344</a>.
                         </dd>
-                        
+
                         <dt>How to use the <code>.multiselect('dataprovider', data)</code> method?</dt>
                         <dd>
                             Have a look at the <a href="#methods">Methods</a> section. In the past, there has been some confusion about how the method handles option groups. If the documentation does not help you, have a look at the issue tracker, as for example issue <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/356">#356</a>.
                         </dd>
-                        
+
                         <dt>A <code>type="reset"</code> button does not refresh the multiselect, what to do?</dt>
                         <dd>
                             Have a look at the <a href="#further-examples">Further Examples</a> section (in addition, issue <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/360">360</a> discussed this).
                         </dd>
-                        
+
                         <dt>Using multiple <code>select</code>'s in single selection mode with <code>option</code>'s sharing values across the different <code>select</code>'s.</dt>
                         <dd>
                             This issue is discussed in detail here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/362">#362</a>. A simple solution is to use different option values for the option <code>checkboxName</code>:
@@ -5331,32 +5485,32 @@ <h2 id="faq">Frequently Asked Questions</h2>
 </pre>
                             where <code>_.uniqueId('multiselect_')</code> should be replaced with a random generator. Alternatively, a unique value for <code>checkboxName</code> can be used for each multiselect.
                         </dd>
-                        
+
                         <dt>How to avoid <code>TypeError: Cannot read property "toString" of ...</code>?</dt>
                         <dd>
                             This error may be thrown if <code>null</code> or <code>undefined</code> is provided as argument of <code>.multiselect('select', value)</code> or <code>.multiselect('deselect', value)</code>, see <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/386">#386</a>.
                         </dd>
-                        
+
                         <dt>Why is there no "uncheck all" option?</dt>
                         <dd>
                             This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/271">#271.</a>
                         </dd>
-                        
+
                         <dt>Esc does not close the dropdown?!</dt>
                         <dd>
                             This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/368">#368</a>. Currently, pressing <code>Esc</code> will not close the dropdown as there were some bugs with this.
                         </dd>
-                        
+
                         <dt>How to keep the dropdown open?</dt>
                         <dd>
                             This issue is discussed here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/426">#426</a>.
                         </dd>
-                        
+
                         <dt>Why is the dropdown not showing (or only partly shown) within modals?</dt>
                         <dd>
                             This is a general issue not directly related to Bootstrap Multiselect: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/455">#455</a>.
                         </dd>
-                        
+
                         <dt>How do add icons to the options (<a href="https://github.com/davidstutz/bootstrap-multiselect/issues/475">#475</a>)?</dt>
                         <dd>
                             Adapt the <code>optionLabel</code> option as follows:
@@ -5366,48 +5520,48 @@ <h2 id="faq">Frequently Asked Questions</h2>
 },
 </pre>
                         </dd>
-                        
+
                         <dt>How to add a deselect all functionality (the inverse to the select all option)?</dt>
                         <dd>
                             This issue was discussed in the following pull request: <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/487">#487</a>.
                         </dd>
-                        
+
                         <dt>How to bind object values using Knockout JS?</dt>
                         <dd>
                             This issue was discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/532">#532</a>.
                         </dd>
-                        
+
                         <dt>Options do net get updated when using Angular JS?</dt>
                         <dd>
                             This issues was discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/519">#519</a>.
                         </dd>
-                        
+
                         <dt>Is there a search event?</dt>
                         <dd>
                             This was discussed here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/530">#530</a>.
                         </dd>
                     </dl>
-                    
+
                     <div class="page-header">
                         <h2 id="known-issues">Known Issues</h2>
                     </div>
-                    
+
                     <dl>
                         <dt>Slow dropdown on Chrome 35.</dt>
                         <dd>
                             As discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/268">#268</a>, certain versions seem to have some performance problems, especially Chrome 35.0.1916.114m.
                         </dd>
-                        
+
                         <dt>Using <code>maxHeight</code> results in the filter being not fixed at the top.</dt>
                         <dd>
                             See issue <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/396"></a>. Pull requests are welcome.
                         </dd>
                     </dl>
-                    
+
                     <div class="page-header">
                         <h2 id="license">License</h2>
                     </div>
-                    
+
                     <dl>
                         <dt>Apache License, Version 2.0</dt>
                         <dd>
@@ -5437,7 +5591,7 @@ <h2 id="license">License</h2>
                             </p>
                         </dd>
                     </dl>
-                    
+
                     <hr>
                     <p>
                         &copy; 2012 - 2014
diff --git a/tests/spec/bootstrap-multiselect.js b/tests/spec/bootstrap-multiselect.js
index 2e9f1d5d..e9ae4391 100644
--- a/tests/spec/bootstrap-multiselect.js
+++ b/tests/spec/bootstrap-multiselect.js
@@ -3,19 +3,19 @@ describe('Bootstrap Multiselect "Core".', function() {
 
     beforeEach(function() {
         var $select = $('<select id="multiselect" multiple="multiple"></select>');
-        
+
         for (var i = 1; i < 100; i++) {
             var $option = $('<option value="' + i + '">' + i + '</option>');
-            
+
             if (i < 10) {
                 $option.prop('selected', true);
             }
-            
+
             $select.append($option);
         }
-        
+
         $('body').append($select);
-        
+
         $select.multiselect({
             buttonContainer: '<div id="multiselect-container"></div>',
             onInitialized: function($select) {
@@ -23,182 +23,182 @@ describe('Bootstrap Multiselect "Core".', function() {
             }
         });
     });
-    
+
     it('Should add the container after the select.', function() {
         expect($('#multiselect-container').length).toBe(1);
     });
-    
+
     it('Should add the multiselect button.', function() {
         expect($('#multiselect-container .multiselect').length).toBe(1);
     });
-    
+
     it('Should add the dropdown menu.', function() {
         expect($('#multiselect-container .dropdown-menu').length).toBe(1);
     });
-    
+
     it('Should add an li element with checkbox and label for each option.', function() {
         expect($('#multiselect-container li').length).toBe(99);
         expect($('#multiselect-container label').length).toBe(99);
         expect($('#multiselect-container input[type="checkbox"]').length).toBe(99);
     });
-    
+
     it('Should preserve selected options.', function() {
         expect($('#multiselect-container input[type="checkbox"]:checked').length).toBe(9);
         expect($('#multiselect option:selected').length).toBe(9);
     });
-    
+
     it('Should be able to select options by value.', function() {
         $('#multiselect').multiselect('select', '10');
-        
+
         expect($('#multiselect option[value="10"]').prop('selected')).toBe(true);
         expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(true);
     });
-    
+
     it('Select method should handle "null" and "undefined" correctly.', function() {
         expect($('#multiselect option:selected').length).toBe(9);
-        
+
         $('#multiselect').multiselect('select', null);
         expect($('#multiselect option:selected').length).toBe(9);
-        
+
         $('#multiselect').multiselect('select', undefined);
         expect($('#multiselect option:selected').length).toBe(9);
     });
-    
+
     it('Should be able to deselect options by value.', function() {
         $('#multiselect').multiselect('select', '10');
         $('#multiselect').multiselect('deselect', '10');
-        
+
         expect($('#multiselect option[value="10"]').prop('selected')).toBe(false);
         expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(false);
     });
-    
+
     it('Deselect method should handle "null" and "undefined" correctly.', function() {
         expect($('#multiselect option:selected').length).toBe(9);
-        
+
         $('#multiselect').multiselect('deselect', null);
         expect($('#multiselect option:selected').length).toBe(9);
-        
+
         $('#multiselect').multiselect('deselect', undefined);
         expect($('#multiselect option:selected').length).toBe(9);
     });
-    
+
     it('Should be able to select options using an array of values.', function() {
         $('#multiselect').multiselect('select', ['10', '11']);
-        
+
         expect($('#multiselect option[value="10"]').prop('selected')).toBe(true);
         expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(true);
-        
+
         expect($('#multiselect option[value="11"]').prop('selected')).toBe(true);
         expect($('#multiselect-container input[value="11"]').prop('checked')).toBe(true);
     });
-    
+
     it('Should be able to deselect options using an array of values.', function() {
         $('#multiselect').multiselect('select', ['10', '11']);
         $('#multiselect').multiselect('deselect', ['10', '11']);
-        
+
         expect($('#multiselect option[value="10"]').prop('selected')).toBe(false);
         expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(false);
-        
+
         expect($('#multiselect option[value="11"]').prop('selected')).toBe(false);
         expect($('#multiselect-container input[value="11"]').prop('checked')).toBe(false);
     });
-    
+
     it('Should be able to disable the multiselect', function() {
         $('#multiselect').multiselect('disable');
-        
+
         expect($('#multiselect').prop('disabled')).toBe(true);
     });
-    
+
     it('Should be able to enable the multiselect', function() {
         $('#multiselect').multiselect('disable');
         $('#multiselect').multiselect('enable');
-        
+
         expect($('#multiselect').prop('disabled')).toBe(false);
     });
-    
+
     it('Should be able to select all options.', function() {
         $('#multiselect').multiselect('selectAll');
-        
+
         for (var i = 1; i < 100; i++) {
             expect($('#multiselect option[value="' + i.toString() + '"]').prop('selected')).toBe(true);
             expect($('#multiselect-container input[value="' + i.toString() + '"]').prop('checked')).toBe(true);
         }
     });
-    
+
     it('Should be able to deselect all options.', function() {
         $('#multiselect').multiselect('selectAll');
-        
+
         for (var i = 1; i < 100; i++) {
             expect($('#multiselect option[value="' + i.toString() + '"]').prop('selected')).toBe(true);
             expect($('#multiselect-container input[value="' + i.toString() + '"]').prop('checked')).toBe(true);
         }
-        
+
         $('#multiselect').multiselect('deselectAll');
-        
+
         for (var i = 1; i < 100; i++) {
             expect($('#multiselect option[value="' + i.toString() + '"]').prop('selected')).toBe(false);
             expect($('#multiselect-container input[value="' + i.toString() + '"]').prop('checked')).toBe(false);
         }
     });
-    
+
     it('Should update the checkboxes according to the selected options after using refresh.', function() {
         for (var i = 10; i < 20; i++) {
             $('#multiselect option[value="' + i + '"]').prop('selected', true);
         }
-        
+
         expect($('#multiselect option:selected').length).toBe(19);
         expect($('#multiselect-container input[type="checkbox"]:checked').length).toBe(9);
-        
+
         $('#multiselect').multiselect('refresh');
-        
+
         expect($('#multiselect-container input[type="checkbox"]:checked').length).toBe(19);
-        
+
         for (var i = 10; i < 20; i++) {
             expect($('#multiselect option[value="' + i + '"]').prop('selected')).toBe(true);
         }
     });
-    
+
     it('Should remove container, button and ul after destroy.', function() {
         $('#multiselect').multiselect('destroy');
-        
+
         // Destroy should remove container, button and ul.
         expect($('#multiselect-container.multiselect-container').length).toBe(0);
         expect($('#multiselect-container .multiselect').length).toBe(0);
         expect($('#multiselect-container .dropdown-menu').length).toBe(0);
     });
-    
+
     it('Should select an option when checkbox is changed (change event).', function() {
         $('#multiselect-container li input[value="10"]').prop('checked', true);
         $('#multiselect-container li input[value="10"]').trigger('change');
-        
+
         expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(true);
         expect($('#multiselect option[value="10"]').prop('selected')).toBe(true);
     });
-    
+
     it('Should deselect an option when checkbox is changed (change event).', function() {
         $('#multiselect-container li input[value="10"]').prop('checked', true);
         $('#multiselect-container li input[value="10"]').trigger('change');
-        
+
         // Already checked above.
-        
+
         $('#multiselect-container li input[value="10"]').prop('checked', false);
         $('#multiselect-container li input[value="10"]').trigger('change');
-        
+
         expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(false);
         expect($('#multiselect option[value="10"]').prop('selected')).toBe(false);
     });
-    
+
     it('Should select an option when checkbox is clicked.', function() {
         $('#multiselect-container li input[value="10"]').click();
-        
+
         expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(true);
         expect($('#multiselect option[value="10"]').prop('selected')).toBe(true);
     });
-    
+
     it('Should deselect an option when checkbox is clicked.', function() {
         $('#multiselect-container li input[value="10"]').click();
         $('#multiselect-container li input[value="10"]').click();
-        
+
         expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(false);
         expect($('#multiselect option[value="10"]').prop('selected')).toBe(false);
     });
@@ -216,29 +216,29 @@ describe('Bootstrap Multiselect "Core".', function() {
 describe('Bootstrap Multiselect "Single Selection"', function() {
     beforeEach(function() {
         var $select = $('<select id="multiselect"></select>');
-        
+
         for (var i = 1; i < 100; i++) {
             $select.append('<option value="' + i + '">Option ' + i + '</option>');
         }
-        
+
         $('body').append($select);
-        
+
         $select.multiselect({
             buttonContainer: '<div id="multiselect-container"></div>'
         });
     });
-    
+
     it('Should create radio buttons instead of checkboxes.', function() {
         expect($('#multiselect-container input[type="radio"]').length).toBe(99);
         expect($('#multiselect-container input[type="checkbox"]').length).toBe(0);
-        
+
         // Browser selects one option per default.
         expect($('#multiselect option:selected').length).toBe(1);
     });
-    
+
     it('Only one option at a time can be selected.', function() {
         expect($('#multiselect option:selected').length).toBe(1);
-        
+
         var i = 0;
         $('#multiselect-container input').each(function() {
             if (i === 0) {
@@ -248,18 +248,18 @@ describe('Bootstrap Multiselect "Single Selection"', function() {
             else {
                 expect($(this).prop('checked')).toBe(false);
                 $(this).click();
-                
+
                 expect($('#multiselect option:selected').length).toBe(1);
                 expect($(this).prop('checked')).toBe(true);
                 i++;
             }
         });
     });
-    
+
     it('Deselect all should work.', function() {
         expect($('#multiselect option:selected').length).toBe(1);
     });
-    
+
     afterEach(function() {
         $('#multiselect').multiselect('destroy');
         $('#multiselect').remove();
@@ -267,25 +267,25 @@ describe('Bootstrap Multiselect "Single Selection"', function() {
 });
 
 describe('Bootstrap Multiselect "Optgroups"', function() {
-    
+
     // Count the number of onChanges fired.
     var fired = 0;
-    
+
     beforeEach(function() {
         var $select = $('<select id="multiselect" multiple="multiple"></select>');
-        
+
         for (var i = 1; i < 11; i++) {
             var $optgroup = $('<optgroup label="Group ' + i + '"></optgroup>');
-            
+
             for (var j = 1; j < 11; j++) {
                 $optgroup.append('<option value="' + i + '-' + j + '">Option ' + i + '.' + j + '</option>');
             }
-            
+
             $select.append($optgroup);
         }
-        
+
         $('body').append($select);
-        
+
         $select.multiselect({
             buttonContainer: '<div id="multiselect-container"></div>',
             enableClickableOptGroups: true,
@@ -294,54 +294,54 @@ describe('Bootstrap Multiselect "Optgroups"', function() {
             }
         });
     });
-    
+
     it('Should correctly create labels for optgroups.', function() {
         expect($('#multiselect-container li.multiselect-group').length).toBe(10);
         expect($('#multiselect-container li.multiselect-group-clickable').length).toBe(10);
-        
+
         $('#multiselect-container label.multiselect-group').each(function() {
             expect($('input', $(this)).length).toBe(10);
         });
     });
-    
+
     it('Groups should be clickable.', function() {
         expect($('#multiselect option:selected').length).toBe(0);
-        
+
         var i = 0;
         $('#multiselect-container li.multiselect-group').each(function() {
             $('label', $(this)).click();
             expect($('option:selected', $('#multiselect optgroup')[i]).length).toBe(10);
             expect($('#multiselect option:selected').length).toBe(10);
-            
+
             $('label', $(this)).click();
             i++;
         });
     });
-    
+
     it('Clickable groups should fire onChange only once.', function() {
         expect($('#multiselect option:selected').length).toBe(0);
-        
+
         fired = 0;
         expect(fired).toBe(0);
-        
+
         var i = 0;
         $('#multiselect-container li.multiselect-group').each(function() {
             $('label', $(this)).click();
-            
+
             // Selected
             expect(fired).toBe(1);
             fired = 0;
-            
+
             $('label', $(this)).click();
-            
+
             // Deselected
             expect(fired).toBe(1);
             fired = 0;
-            
+
             i++;
         });
     });
-    
+
     afterEach(function() {
         $('#multiselect').multiselect('destroy');
         $('#multiselect').remove();
@@ -351,14 +351,14 @@ describe('Bootstrap Multiselect "Optgroups"', function() {
 describe('Bootstrap Multiselect "Dataprovider"', function() {
     beforeEach(function() {
         var $select = $('<select id="multiselect" multiple="multiple"></select>');
-        
+
         $('body').append($select);
-        
+
         $select.multiselect({
             buttonContainer: '<div id="multiselect-container"></div>'
         });
     });
-    
+
     var options = [
             {label: 'Option 1', value: '1', selected: true, title: 'Option 1 Title'},
             {label: 'Option 2', value: '2', title: 'Option 2 Title'},
@@ -367,47 +367,47 @@ describe('Bootstrap Multiselect "Dataprovider"', function() {
             {label: 'Option 5', value: '5', title: 'Option 5 Title'},
             {label: 'Option 6', value: '6', title: 'Option 6 Title'}
         ];
-    
+
     it("Should be able to add options.", function() {
         $('#multiselect').multiselect('dataprovider', options);
         expect($('#multiselect option').length).toBe(6);
         expect($('#multiselect-container input').length).toBe(6);
-        
+
         expect($('#multiselect option[value="1"]').length).toBe(1);
         expect($('#multiselect option[value="1"]').prop('selected')).toBe(true);
         expect($('#multiselect-container input[value="1"]').prop('checked')).toBe(true);
-        
+
         expect($('#multiselect option[value="2"]').length).toBe(1);
         expect($('#multiselect option[value="2"]').prop('selected')).toBe(false);
         expect($('#multiselect-container input[value="2"]').prop('checked')).toBe(false);
-        
+
         expect($('#multiselect option[value="3"]').length).toBe(1);
         expect($('#multiselect option[value="3"]').prop('selected')).toBe(true);
         expect($('#multiselect-container input[value="3"]').prop('checked')).toBe(true);
-        
+
         expect($('#multiselect option[value="4"]').length).toBe(1);
         expect($('#multiselect option[value="4"]').prop('selected')).toBe(false);
         expect($('#multiselect-container input[value="4"]').prop('checked')).toBe(false);
-        
+
         expect($('#multiselect option[value="5"]').length).toBe(1);
         expect($('#multiselect option[value="5"]').prop('selected')).toBe(false);
         expect($('#multiselect-container input[value="5"]').prop('checked')).toBe(false);
-        
+
         expect($('#multiselect option[value="6"]').length).toBe(1);
         expect($('#multiselect option[value="6"]').prop('selected')).toBe(false);
         expect($('#multiselect-container input[value="6"]').prop('checked')).toBe(false);
     });
-    
+
     it("Should be able to define title.", function() {
         $('#multiselect').multiselect('dataprovider', options);
-        
+
         expect($('#multiselect option[value="1"]').attr('title')).toBe('Option 1 Title');
         expect($('#multiselect option[value="2"]').attr('title')).toBe('Option 2 Title');
         expect($('#multiselect option[value="3"]').attr('title')).toBe('Option 3 Title');
         expect($('#multiselect option[value="4"]').attr('title')).toBe('Option 4 Title');
         expect($('#multiselect option[value="5"]').attr('title')).toBe('Option 5 Title');
         expect($('#multiselect option[value="6"]').attr('title')).toBe('Option 6 Title');
-        
+
         expect($('#multiselect-container input[value="1"]').closest('label').attr('title')).toBe('Option 1 Title');
         expect($('#multiselect-container input[value="2"]').closest('label').attr('title')).toBe('Option 2 Title');
         expect($('#multiselect-container input[value="3"]').closest('label').attr('title')).toBe('Option 3 Title');
@@ -415,7 +415,7 @@ describe('Bootstrap Multiselect "Dataprovider"', function() {
         expect($('#multiselect-container input[value="5"]').closest('label').attr('title')).toBe('Option 5 Title');
         expect($('#multiselect-container input[value="6"]').closest('label').attr('title')).toBe('Option 6 Title');
     });
-    
+
     var optgroups = [
         {
             label: 'Group 1', children: [
@@ -432,18 +432,18 @@ describe('Bootstrap Multiselect "Dataprovider"', function() {
             ]
         }
     ];
-        
+
     it('Should be able to handle optgroups.', function() {
         $('#multiselect').multiselect('dataprovider', optgroups);
-        
+
         expect($('#multiselect optgroup').length).toBe(2);
         expect($('#multiselect option').length).toBe(6);
         expect($('#multiselect-container input').length).toBe(6);
-        
+
         expect($('#multiselect optgroup[label="Group 1"] option').length).toBe(3);
         expect($('#multiselect optgroup[label="Group 2"] option').length).toBe(3);
     });
-    
+
     afterEach(function() {
         $('#multiselect').multiselect('destroy');
         $('#multiselect').remove();
@@ -451,21 +451,21 @@ describe('Bootstrap Multiselect "Dataprovider"', function() {
 });
 
 describe('Bootstrap Multiselect "Select All".', function() {
-    
+
     var onSelectAllTriggered = false;
     var onDeselectAllTriggered = false;
-    
+
     var fired = 0;
-    
+
     beforeEach(function() {
         var $select = $('<select id="multiselect" multiple="multiple"></select>');
-        
+
         for (var i = 1; i < 100; i++) {
             $select.append('<option value="' + i + '">1</option>');
         }
-        
+
         $('body').append($select);
-        
+
         $select.multiselect({
             buttonContainer: '<div id="multiselect-container"></div>',
             includeSelectAllOption: true,
@@ -481,195 +481,364 @@ describe('Bootstrap Multiselect "Select All".', function() {
             }
         });
     });
-    
+
     it('Should not add an additional option to the select.', function() {
         expect($('#multiselect option[value="multiselect-all"]').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').length).toBe(1);
         expect($('#multiselect option').length).toBe(99);
         expect($('#multiselect-container input').length).toBe(100);
     });
-    
+
     it('Should update the select all when all options are selected by the "select" method.', function() {
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
-        
+
         for (var i = 1; i < 100; i++) {
             $('#multiselect').multiselect('select', i.toString());
             expect($('#multiselect option[value="' + i.toString() + '"]').prop('selected')).toBe(true);
         }
-        
+
         expect($('#multiselect option:selected').length).toBe(99);
         expect($('#multiselect-container input').length).toBe(100);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(true);
     });
-    
+
     it('Should update the select all when all options are deselected by the "deselect" method (first all options are selected as before).', function() {
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
-        
+
         for (var i = 1; i < 100; i++) {
             $('#multiselect').multiselect('select', i.toString());
         }
-        
+
         expect($('#multiselect option:selected').length).toBe(99);
         expect($('#multiselect-container input:checked').length).toBe(100);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(true);
-        
+
         for (var i = 1; i < 100; i++) {
             $('#multiselect').multiselect('deselect', i.toString());
         }
-        
+
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
     });
-    
+
     it('Should update the select all option when all options are selected by the change event.', function() {
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
-        
+
         // Change all checkboxes except the select all one.
         $('#multiselect-container input[value!="multiselect-all"]').prop('checked', true);
         $('#multiselect-container input[value!="multiselect-all"]').trigger('change');
-        
+
         expect($('#multiselect option:selected[value!="multiselect-all"]').length).toBe(99);
-        
+
         // 100 options seleted including the select all.
         expect($('#multiselect option:selected').length).toBe(99);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(true);
     });
-    
+
     it('Should update the select all option when all options are deselected by the change event.', function() {
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
-        
+
         $('#multiselect-container input[value!="multiselect-all"]').prop('checked', true);
         $('#multiselect-container input[value!="multiselect-all"]').trigger('change');
-        
+
         expect($('#multiselect option:selected[value!="multiselect-all"]').length).toBe(99);
-        
+
         expect($('#multiselect option:selected').length).toBe(99);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(true);
-        
+
         // Change all checkboxes except the select all one.
         $('#multiselect-container input[value!="multiselect-all"]').prop('checked', false);
         $('#multiselect-container input[value!="multiselect-all"]').trigger('change');
-        
+
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
     });
-    
+
     it('Should update the select all option when all options are selected by the click event.', function() {
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
-        
+
         $('#multiselect-container input[value!="multiselect-all"]').click();
-        
+
         expect($('#multiselect option:selected').length).toBe(99);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(true);
     });
-    
+
     it('Should update the select all option when all options are deselected by the click event.', function() {
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
-        
+
         $('#multiselect-container input[value!="multiselect-all"]').click();
-        
+
         expect($('#multiselect option:selected').length).toBe(99);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(true);
-        
+
         $('#multiselect-container input[value!="multiselect-all"]').click();
-        
+
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
     });
-    
+
     it('Should trigger onSelectAll based on the change event.', function() {
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
-        
+
         // Change all checkboxes except the select all one.
         $('#multiselect-container input[value!="multiselect-all"]').prop('checked', true);
         $('#multiselect-container input[value!="multiselect-all"]').trigger('change');
-        
+
         expect($('#multiselect option:selected[value!="multiselect-all"]').length).toBe(99);
-        
+
         // 100 options seleted including the select all.
         expect($('#multiselect option:selected').length).toBe(99);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(true);
-        
+
         expect(onSelectAllTriggered).toBe(true);
     });
-    
+
     it('Should trigger onSelectAll based on the click event.', function() {
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
-        
+
         $('#multiselect-container input[value!="multiselect-all"]').click();
-        
+
         expect($('#multiselect option:selected').length).toBe(99);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(true);
-        
+
         expect(onSelectAllTriggered).toBe(true);
     });
-    
+
     it('Should trigger onSelectAll on function call.', function() {
         $('#multiselect').multiselect('selectAll', true, true);
         expect(onSelectAllTriggered).toBe(true);
     });
-    
+
     it('Should not trigger onChange for select all option.', function() {
         fired = 0;
         expect(fired).toBe(0);
         $('#multiselect-container input[value="multiselect-all"]').click();
         expect(fired).toBe(0);
     });
-    
+
     afterEach(function() {
         $('#multiselect').multiselect('destroy');
         $('#multiselect').remove();
     });
 });
 
+describe('Bootstrap Multiselect "setSelection".', function () {
+
+    var onChangeSelected = [];
+    var onChangeDeselected = [];
+    var onChangeFired = 0;
+    var $select;
+
+    beforeEach(function () {
+        $select = $('<select id="multiselect" multiple="multiple"></select>');
+
+        for (var i = 1; i < 100; i++) {
+            $select.append('<option value="' + i + '">1</option>');
+        }
+
+        $('body').append($select);
+
+        $select.multiselect({
+            onChange: function (option, checked) {
+                ++onChangeFired;
+
+                (checked ? onChangeSelected : onChangeDeselected).push($(option).val());
+            }
+        });
+
+        onChangeFired = 0;
+        onChangeSelected = [];
+        onChangeDeselected = [];
+    });
+
+    var VALS_A = [3, 25, 19, 76];
+    var VALS_B = [11, 23, 92];
+    var VALS_C = [37, 69, 40];
+    var VALS_AB = VALS_A.concat(VALS_B);
+    var VALS_BC = VALS_B.concat(VALS_C);
+    var VALS_ABC = VALS_A.concat(VALS_B).concat(VALS_C);
+
+    function sortInt(x, y) { return (x - y); }
+
+    VALS_A = VALS_A.sort(sortInt).map(function (n) { return n.toString(); });
+    VALS_B = VALS_B.sort(sortInt).map(function (n) { return n.toString(); });
+    VALS_C = VALS_C.sort(sortInt).map(function (n) { return n.toString(); });
+    VALS_AB = VALS_AB.sort(sortInt).map(function (n) { return n.toString(); });
+    VALS_BC = VALS_BC.sort(sortInt).map(function (n) { return n.toString(); });
+    VALS_ABC = VALS_ABC.sort(sortInt).map(function (n) { return n.toString(); });
+
+    it('Should be able to set selected values', function () {
+        var values = VALS_AB;
+
+        expect($('option:selected', $select).length).toBe(0);
+        expect($select.val()).toBeNull();
+
+        $select.multiselect("setSelected", values);
+        for (var i = 0; i < values.length; ++i) {
+            expect($('option[value="' + values[i].toString() + '"]').prop('selected')).toBe(true);
+        }
+        expect($select.val()).toEqual(values);
+    });
+
+    it('Should be able to deselect values', function () {
+        var values = VALS_AB;
+        var i;
+
+        // Verify initial state
+        expect($('option:selected', $select).length).toBe(0);
+        expect($select.val()).toBeNull();
+
+        // Select some values and test the state
+        $select.multiselect("select", values);
+        expect($select.val()).toEqual(values);
+        for (i = 0; i < VALS_C.length; ++i) {
+            expect($('option[value="' + VALS_C[i].toString() + '"]').prop('selected')).toBe(false);
+        }
+        for (i = 0; i < values.length; ++i) {
+            expect($('option[value="' + values[i].toString() + '"]').prop('selected')).toBe(true);
+        }
+
+        // Set the selection to a different set of values
+        $select.multiselect("setSelected", VALS_C);
+        expect($select.val()).toEqual(VALS_C);
+        for (i = 0; i < VALS_C.length; ++i) {
+            expect($('option[value="' + VALS_C[i].toString() + '"]').prop('selected')).toBe(true);
+        }
+        for (i = 0; i < values.lengths; ++i) {
+            expect($('option[value="' + values[i].toString() + '"]').prop('selected')).toBe(false);
+        }
+    });
+
+    it('Should be able to receive onChange notifications for only the values that changed', function () {
+        var initVals = VALS_AB;
+        var setVals = VALS_BC;
+        var i;
+
+        expect(onChangeFired).toBe(0);
+        expect(onChangeSelected.length).toBe(0);
+        expect(onChangeDeselected.length).toBe(0);
+
+        $select.multiselect("setSelected", initVals, true);
+        expect(onChangeSelected).toEqual(initVals);
+        expect($select.val()).toEqual(initVals);
+        expect(onChangeSelected).toEqual($select.val());
+        expect(onChangeDeselected.length).toBe(0);
+        expect(onChangeFired).toBe(initVals.length);
+        for (i = 0; i < VALS_A.length; ++i) {
+            expect($('option[value="' + VALS_A[i].toString() + '"]').prop('selected')).toBe(true);
+        }
+        for (i = 0; i < VALS_B.length; ++i) {
+            expect($('option[value="' + VALS_B[i].toString() + '"]').prop('selected')).toBe(true);
+        }
+        for (i = 0; i < VALS_C.length; ++i) {
+            expect($('option[value="' + VALS_C[i].toString() + '"]').prop('selected')).toBe(false);
+        }
+
+        onChangeSelected = [];
+        onChangeFired = 0;
+        $select.multiselect("setSelected", setVals, true);  // Unselect "A", Select "C", Leave "B" Selected
+        expect($select.val()).toEqual(setVals);
+        expect(onChangeSelected).toEqual(VALS_C);
+        expect(onChangeDeselected).toEqual(VALS_A);
+        expect(onChangeFired).toBe(VALS_C.length + VALS_A.length);
+        for (i = 0; i < VALS_A.length; ++i) {
+            expect($('option[value="' + VALS_A[i].toString() + '"]').prop('selected')).toBe(false);
+        }
+        for (i = 0; i < VALS_B.length; ++i) {
+            expect($('option[value="' + VALS_B[i].toString() + '"]').prop('selected')).toBe(true);
+        }
+        for (i = 0; i < VALS_C.length; ++i) {
+            expect($('option[value="' + VALS_C[i].toString() + '"]').prop('selected')).toBe(true);
+        }
+    });
+
+    it('Should not fire onChange notifications if they\'re not requested', function () {
+        expect(onChangeFired).toBe(0);
+        expect(onChangeSelected.length).toBe(0);
+        expect(onChangeDeselected.length).toBe(0);
+
+        // Set a new selection
+        $select.multiselect('setSelected', VALS_AB, false);
+
+        // Verify the selection changed but events did not fire
+        expect($select.val()).toEqual(VALS_AB);
+        expect(onChangeFired).toBe(0);
+        expect(onChangeSelected.length).toBe(0);
+        expect(onChangeDeselected.length).toBe(0);
+
+        // Set a new selection
+        $select.multiselect('setSelected', VALS_BC, false);
+
+        // Verify the selection changed but events did not fire
+        expect($select.val()).toEqual(VALS_BC);
+        expect(onChangeFired).toBe(0);
+        expect(onChangeSelected.length).toBe(0);
+        expect(onChangeDeselected.length).toBe(0);
+
+        // Set a new selection
+        $select.multiselect('setSelected', VALS_ABC, false);
+
+        // Verify the selection changed but events did not fire
+        expect($select.val()).toEqual(VALS_ABC);
+        expect(onChangeFired).toBe(0);
+        expect(onChangeSelected.length).toBe(0);
+        expect(onChangeDeselected.length).toBe(0);
+    });
+
+    afterEach(function () {
+        $select.multiselect('destroy');
+        $select.remove();
+    });
+});
+
 describe('Bootstrap Multiselect Specific Issues', function() {
-    
+
     it('#393', function() {
         var $select = $('<select id="multiselect" multiple="multiple"></select>');
-        
+
         for (var i = 1; i < 100; i++) {
             $select.append('<option value="' + i + '">1</option>');
         }
-        
+
         $('body').append($select);
-        
+
         $select.multiselect({
             buttonContainer: '<div id="multiselect-container"></div>',
             includeSelectAllOption: true,
             selectAllValue: 0
         });
-        
+
         expect($('#multiselect-container input[value="0"]').length).toBe(1);
         expect($('#multiselect-container input[value="0"]').prop('checked')).toBe(false);
-        
+
         $('#multiselect').multiselect('selectAll');
-        
+
         expect($('#multiselect option:selected').length).toBe(99);
         expect($('#multiselect-container input[value="0"]').prop('checked')).toBe(true);
-        
+
         $('#multiselect').multiselect('deselectAll');
-        
+
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="0"]').prop('checked')).toBe(false);
-        
+
         $('#multiselect-container input[value="0"]').click();
-        
+
         expect($('#multiselect option:selected').length).toBe(99);
         expect($('#multiselect-container input[value="0"]').prop('checked')).toBe(true);
-        
+
         $('#multiselect-container input[value="0"]').click();
-        
+
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="0"]').prop('checked')).toBe(false);
-        
+
         $('#multiselect').multiselect('destroy');
         $('#multiselect').remove();
     });

From 2fed40d646832fa74f0ad1628446de0123b4c237 Mon Sep 17 00:00:00 2001
From: "Darrin W. Cullop" <v-dacul@microsoft.com>
Date: Mon, 18 Apr 2016 07:57:33 -0700
Subject: [PATCH 2/3] Revert "Added "setSelection" method to code, tests, and
 documentation."

This reverts commit ebd154df552c1c3a4f86ae6eed1a561360d75f60.
---
 dist/js/bootstrap-multiselect.js    | 276 +++++++---------
 index.html                          | 480 ++++++++++-----------------
 tests/spec/bootstrap-multiselect.js | 489 +++++++++-------------------
 3 files changed, 435 insertions(+), 810 deletions(-)

diff --git a/dist/js/bootstrap-multiselect.js b/dist/js/bootstrap-multiselect.js
index 42e8fe1a..a7c71eab 100644
--- a/dist/js/bootstrap-multiselect.js
+++ b/dist/js/bootstrap-multiselect.js
@@ -1,23 +1,23 @@
 /**
  * Bootstrap Multiselect (https://github.com/davidstutz/bootstrap-multiselect)
- *
+ * 
  * Apache License, Version 2.0:
  * Copyright (c) 2012 - 2015 David Stutz
- *
+ * 
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not
  * use this file except in compliance with the License. You may obtain a
  * copy of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
+ * 
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  * License for the specific language governing permissions and limitations
  * under the License.
- *
+ * 
  * BSD 3-Clause License:
  * Copyright (c) 2012 - 2015 David Stutz
  * All rights reserved.
- *
+ * 
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are met:
  *    - Redistributions of source code must retain the above copyright notice,
@@ -28,7 +28,7 @@
  *    - Neither the name of David Stutz nor the names of its contributors may be
  *      used to endorse or promote products derived from this software without
  *      specific prior written permission.
- *
+ * 
  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
@@ -175,12 +175,12 @@
     function Multiselect(select, options) {
 
         this.$select = $(select);
-
+        
         // Placeholder via data attributes
         if (this.$select.attr("data-placeholder")) {
             options.nonSelectedText = this.$select.data("placeholder");
         }
-
+        
         this.options = this.mergeOptions($.extend({}, options, this.$select.data()));
 
         // Initialization.
@@ -197,7 +197,7 @@
         this.options.onDropdownShown = $.proxy(this.options.onDropdownShown, this);
         this.options.onDropdownHidden = $.proxy(this.options.onDropdownHidden, this);
         this.options.onInitialized = $.proxy(this.options.onInitialized, this);
-
+        
         // Build select all if enabled.
         this.buildContainer();
         this.buildButton();
@@ -212,7 +212,7 @@
         if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {
             this.disable();
         }
-
+        
         this.$select.hide().after(this.$container);
         this.options.onInitialized(this.$select, this.$container);
     }
@@ -224,24 +224,24 @@
              * Default text function will either print 'None selected' in case no
              * option is selected or a list of the selected options up to a length
              * of 3 selected options.
-             *
+             * 
              * @param {jQuery} options
              * @param {jQuery} select
              * @returns {String}
              */
             buttonText: function(options, select) {
-                if (this.disabledText.length > 0
-                        && (this.disableIfEmpty || select.prop('disabled'))
+                if (this.disabledText.length > 0 
+                        && (this.disableIfEmpty || select.prop('disabled')) 
                         && options.length == 0) {
-
+                    
                     return this.disabledText;
                 }
                 else if (options.length === 0) {
                     return this.nonSelectedText;
                 }
-                else if (this.allSelectedText
-                        && options.length === $('option', $(select)).length
-                        && $('option', $(select)).length !== 1
+                else if (this.allSelectedText 
+                        && options.length === $('option', $(select)).length 
+                        && $('option', $(select)).length !== 1 
                         && this.multiple) {
 
                     if (this.selectAllNumber) {
@@ -257,18 +257,18 @@
                 else {
                     var selected = '';
                     var delimiter = this.delimiterText;
-
+                    
                     options.each(function() {
                         var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
                         selected += label + delimiter;
                     });
-
+                    
                     return selected.substr(0, selected.length - 2);
                 }
             },
             /**
              * Updates the title of the button similar to the buttonText function.
-             *
+             * 
              * @param {jQuery} options
              * @param {jQuery} select
              * @returns {@exp;selected@call;substr}
@@ -280,7 +280,7 @@
                 else {
                     var selected = '';
                     var delimiter = this.delimiterText;
-
+                    
                     options.each(function () {
                         var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
                         selected += label + delimiter;
@@ -308,9 +308,9 @@
             },
             /**
              * Triggered on change of the multiselect.
-             *
+             * 
              * Not triggered when selecting/deselecting options manually.
-             *
+             * 
              * @param {jQuery} option
              * @param {Boolean} checked
              */
@@ -335,25 +335,25 @@
             },
             /**
              * Triggered after the dropdown is shown.
-             *
+             * 
              * @param {jQuery} event
              */
             onDropdownShown: function(event) {
-
+                
             },
             /**
              * Triggered after the dropdown is hidden.
-             *
+             * 
              * @param {jQuery} event
              */
             onDropdownHidden: function(event) {
-
+                
             },
             /**
              * Triggered on select all.
              */
             onSelectAll: function(checked) {
-
+                
             },
             /**
              * Triggered after initializing.
@@ -482,12 +482,12 @@
                     'overflow-x': 'hidden'
                 });
             }
-
+            
             if (this.options.dropUp) {
-
+                
                 var height = Math.min(this.options.maxHeight, $('option[data-role!="divider"]', this.$select).length*26 + $('option[data-role="divider"]', this.$select).length*19 + (this.options.includeSelectAllOption ? 26 : 0) + (this.options.enableFiltering || this.options.enableCaseInsensitiveFiltering ? 44 : 0));
                 var moveCalc = height + 34;
-
+                
                 this.$ul.css({
                     'max-height': height + 'px',
                     'overflow-y': 'auto',
@@ -495,13 +495,13 @@
                     'margin-top': "-" + moveCalc + 'px'
                 });
             }
-
+            
             this.$container.append(this.$ul);
         },
 
         /**
          * Build the dropdown options and binds all nessecary events.
-         *
+         * 
          * Uses createDivider and createOptionValue to create the necessary options.
          */
         buildDropdownOptions: function() {
@@ -512,7 +512,7 @@
                 // Support optgroups and options without a group simultaneously.
                 var tag = $element.prop('tagName')
                     .toLowerCase();
-
+            
                 if ($element.prop('value') === this.options.selectAllValue) {
                     return;
                 }
@@ -597,7 +597,7 @@
                         // Unselect option.
                         $option.prop('selected', false);
                     }
-
+                    
                     // To prevent select all from firing onChange: #575
                     this.options.onChange($option, checked);
                 }
@@ -618,12 +618,12 @@
                     return false;
                 }
             });
-
+        
             $('li a', this.$ul).on('touchstart click', $.proxy(function(event) {
                 event.stopPropagation();
 
                 var $target = $(event.target);
-
+                
                 if (event.shiftKey && this.options.multiple) {
                     if($target.is("label")){ // Handles checkbox selection manually (see https://github.com/davidstutz/bootstrap-multiselect/issues/431)
                         event.preventDefault();
@@ -635,39 +635,39 @@
                     if (this.lastToggledInput !== null && this.lastToggledInput !== $target) { // Make sure we actually have a range
                         var from = $target.closest("li").index();
                         var to = this.lastToggledInput.closest("li").index();
-
+                        
                         if (from > to) { // Swap the indices
                             var tmp = to;
                             to = from;
                             from = tmp;
                         }
-
+                        
                         // Make sure we grab all elements since slice excludes the last index
                         ++to;
-
+                        
                         // Change the checkboxes and underlying options
                         var range = this.$ul.find("li").slice(from, to).find("input");
-
+                        
                         range.prop('checked', checked);
-
+                        
                         if (this.options.selectedClass) {
                             range.closest('li')
                                 .toggleClass(this.options.selectedClass, checked);
                         }
-
+                        
                         for (var i = 0, j = range.length; i < j; i++) {
                             var $checkbox = $(range[i]);
 
                             var $option = this.getOptionByValue($checkbox.val());
 
                             $option.prop('selected', checked);
-                        }
+                        }                   
                     }
-
+                    
                     // Trigger the select "change" event
                     $target.trigger("change");
                 }
-
+                
                 // Remembers last clicked option
                 if($target.is("input") && !$target.closest("li").is(".multiselect-item")){
                     this.lastToggledInput = $target;
@@ -735,7 +735,7 @@
                     var allChecked = true;
                     var optionInputs = $visibleOptions.find('input');
                     var values = [];
-
+                    
                     optionInputs.each(function() {
                         allChecked = allChecked && $(this).prop('checked');
                         values.push($(this).val());
@@ -747,7 +747,7 @@
                     else {
                         this.deselect(values, false);
                     }
-
+                    
                     this.options.onChange(optionInputs, !allChecked);
                }, this));
             }
@@ -757,51 +757,51 @@
                 $("li.multiselect-group", this.$ul).siblings().not("li.multiselect-group, li.multiselect-all", this.$ul).each( function () {
                     $(this).toggleClass('hidden', true);
                 });
-
+                
                 $("li.multiselect-group", this.$ul).on("click", $.proxy(function(group) {
                     group.stopPropagation();
                 }, this));
-
+                
                 $("li.multiselect-group > a > b", this.$ul).on("click", $.proxy(function(t) {
                     t.stopPropagation();
                     var n = $(t.target).closest('li');
                     var r = n.nextUntil("li.multiselect-group");
                     var i = true;
-
+                    
                     r.each(function() {
                         i = i && $(this).hasClass('hidden');
                     });
-
+                    
                     r.toggleClass('hidden', !i);
                 }, this));
-
+                
                 $("li.multiselect-group > a > input", this.$ul).on("change", $.proxy(function(t) {
                     t.stopPropagation();
                     var n = $(t.target).closest('li');
                     var r = n.nextUntil("li.multiselect-group", ':not(.disabled)');
                     var s = r.find("input");
-
+                    
                     var i = true;
                     s.each(function() {
                         i = i && $(this).prop("checked");
                     });
-
+                    
                     s.prop("checked", !i).trigger("change");
                 }, this));
-
+                
                 // Set the initial selection state of the groups.
                 $('li.multiselect-group', this.$ul).each(function() {
                     var r = $(this).nextUntil("li.multiselect-group", ':not(.disabled)');
                     var s = r.find("input");
-
+                    
                     var i = true;
                     s.each(function() {
                         i = i && $(this).prop("checked");
                     });
-
+                    
                     $(this).find('input').prop("checked", i);
                 });
-
+                
                 // Update the group checkbox based on new selections among the
                 // corresponding children.
                 $("li input", this.$ul).on("change", $.proxy(function(t) {
@@ -811,19 +811,19 @@
                     var r2 = n.nextUntil("li.multiselect-group", ':not(.disabled)');
                     var s1 = r1.find("input");
                     var s2 = r2.find("input");
-
+                    
                     var i = $(t.target).prop('checked');
                     s1.each(function() {
                         i = i && $(this).prop("checked");
                     });
-
+                    
                     s2.each(function() {
                         i = i && $(this).prop("checked");
                     });
-
+                    
                     n.prevAll('.multiselect-group').find('input').prop('checked', i);
                 }, this));
-
+                
                 $("li.multiselect-all", this.$ul).css('background', '#f3f3f3').css('border-bottom', '1px solid #eaeaea');
                 $("li.multiselect-group > a, li.multiselect-all > a > label.checkbox", this.$ul).css('padding', '3px 20px 3px 35px');
                 $("li.multiselect-group > a > input", this.$ul).css('margin', '4px 0px 5px -20px');
@@ -858,7 +858,7 @@
             else {
                 $label.text(" " + label);
             }
-
+        
             var $checkbox = $('<input/>').attr('type', inputType);
 
             if (this.options.checkboxName) {
@@ -911,7 +911,7 @@
          *
          * @param {jQuery} group
          */
-        createOptgroup: function(group) {
+        createOptgroup: function(group) {            
             if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
                 var label = $(group).attr("label");
                 var value = $(group).attr("value");
@@ -960,14 +960,14 @@
 
         /**
          * Build the select all.
-         *
+         * 
          * Checks if a select all has already been created.
          */
         buildSelectAll: function() {
             if (typeof this.options.selectAllValue === 'number') {
                 this.options.selectAllValue = this.options.selectAllValue.toString();
             }
-
+            
             var alreadyHasSelectAll = this.hasSelectAll();
 
             if (!alreadyHasSelectAll && this.options.includeSelectAllOption && this.options.multiple
@@ -980,21 +980,21 @@
 
                 var $li = $(this.options.templates.li);
                 $('label', $li).addClass("checkbox");
-
+                
                 if (this.options.enableHTML) {
                     $('label', $li).html(" " + this.options.selectAllText);
                 }
                 else {
                     $('label', $li).text(" " + this.options.selectAllText);
                 }
-
+                
                 if (this.options.selectAllName) {
                     $('label', $li).prepend('<input type="checkbox" name="' + this.options.selectAllName + '" />');
                 }
                 else {
                     $('label', $li).prepend('<input type="checkbox" />');
                 }
-
+                
                 var $checkbox = $('input', $li);
                 $checkbox.val(this.options.selectAllValue);
 
@@ -1021,7 +1021,7 @@
 
                     this.$filter = $(this.options.templates.filter);
                     $('input', this.$filter).attr('placeholder', this.options.filterPlaceholder);
-
+                    
                     // Adds optional filter clear button
                     if(this.options.includeFilterClearBtn){
                         var clearBtn = $(this.options.templates.filterClearBtn);
@@ -1033,7 +1033,7 @@
                         }, this));
                         this.$filter.find('.input-group').append(clearBtn);
                     }
-
+                    
                     this.$ul.prepend(this.$filter);
 
                     this.$filter.val(this.query).on('click', function(event) {
@@ -1043,7 +1043,7 @@
                         if (event.which === 13) {
                           event.preventDefault();
                         }
-
+                        
                         // This is useful to catch "keydown" events after the browser has updated the control.
                         clearTimeout(this.searchTimeout);
 
@@ -1091,7 +1091,7 @@
 
                                         // Toggle current element (group or group item) according to showElement boolean.
                                         $(element).toggle(showElement).toggleClass('filter-hidden', !showElement);
-
+                                        
                                         // Differentiate groups and group items.
                                         if ($(element).hasClass('multiselect-group')) {
                                             // Remember group status.
@@ -1103,7 +1103,7 @@
                                             if (showElement) {
                                                 $(currentGroup).show().removeClass('filter-hidden');
                                             }
-
+                                            
                                             // Show all group items when group name satisfies filter.
                                             if (!showElement && currentGroupVisible) {
                                                 $(element).show().removeClass('filter-hidden');
@@ -1134,7 +1134,7 @@
          */
         refresh: function () {
             var inputs = $.map($('li input', this.$ul), $);
-
+            
             $('option', this.$select).each($.proxy(function (index, element) {
                 var $elem = $(element);
                 var value = $elem.val();
@@ -1181,10 +1181,10 @@
 
         /**
          * Select all options of the given values.
-         *
+         * 
          * If triggerOnChange is set to true, the on change event is triggered if
          * and only if one value is passed.
-         *
+         * 
          * @param {Array} selectValues
          * @param {Boolean} triggerOnChange
          */
@@ -1206,11 +1206,11 @@
                 if($option === undefined || $checkbox === undefined) {
                     continue;
                 }
-
+                
                 if (!this.options.multiple) {
                     this.deselectAll(false);
                 }
-
+                
                 if (this.options.selectedClass) {
                     $checkbox.closest('li')
                         .addClass(this.options.selectedClass);
@@ -1218,7 +1218,7 @@
 
                 $checkbox.prop('checked', true);
                 $option.prop('selected', true);
-
+                
                 if (triggerOnChange) {
                     this.options.onChange($option, true);
                 }
@@ -1239,10 +1239,10 @@
 
         /**
          * Deselects all options of the given values.
-         *
+         * 
          * If triggerOnChange is set to true, the on change event is triggered, if
          * and only if one value is passed.
-         *
+         * 
          * @param {Array} deselectValues
          * @param {Boolean} triggerOnChange
          */
@@ -1272,7 +1272,7 @@
 
                 $checkbox.prop('checked', false);
                 $option.prop('selected', false);
-
+                
                 if (triggerOnChange) {
                     this.options.onChange($option, false);
                 }
@@ -1281,7 +1281,7 @@
             this.updateButtonText();
             this.updateSelectAll();
         },
-
+        
         /**
          * Selects all enabled & visible options.
          *
@@ -1292,13 +1292,13 @@
          */
         selectAll: function (justVisible, triggerOnSelectAll) {
             justVisible = (this.options.enableCollapsibleOptGroups && this.options.multiple) ? false : justVisible;
-
+            
             var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
             var allCheckboxes = $("li input[type='checkbox']:enabled", this.$ul);
             var visibleCheckboxes = allCheckboxes.filter(":visible");
             var allCheckboxesCount = allCheckboxes.length;
             var visibleCheckboxesCount = visibleCheckboxes.length;
-
+            
             if(justVisible) {
                 visibleCheckboxes.prop('checked', true);
                 $("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").addClass(this.options.selectedClass);
@@ -1307,7 +1307,7 @@
                 allCheckboxes.prop('checked', true);
                 $("li:not(.divider):not(.disabled)", this.$ul).addClass(this.options.selectedClass);
             }
-
+                
             if (allCheckboxesCount === visibleCheckboxesCount || justVisible === false) {
                 $("option:not([data-role='divider']):enabled", this.$select).prop('selected', true);
             }
@@ -1315,12 +1315,12 @@
                 var values = visibleCheckboxes.map(function() {
                     return $(this).val();
                 }).get();
-
+                
                 $("option:enabled", this.$select).filter(function(index) {
                     return $.inArray($(this).val(), values) !== -1;
                 }).prop('selected', true);
             }
-
+            
             if (triggerOnSelectAll) {
                 this.options.onSelectAll();
             }
@@ -1328,27 +1328,27 @@
 
         /**
          * Deselects all options.
-         *
+         * 
          * If justVisible is true or not specified, only visible options are deselected.
-         *
+         * 
          * @param {Boolean} justVisible
          */
         deselectAll: function (justVisible) {
             justVisible = (this.options.enableCollapsibleOptGroups && this.options.multiple) ? false : justVisible;
             justVisible = typeof justVisible === 'undefined' ? true : justVisible;
-
-            if(justVisible) {
+            
+            if(justVisible) {              
                 var visibleCheckboxes = $("li input[type='checkbox']:not(:disabled)", this.$ul).filter(":visible");
                 visibleCheckboxes.prop('checked', false);
-
+                
                 var values = visibleCheckboxes.map(function() {
                     return $(this).val();
                 }).get();
-
+                
                 $("option:enabled", this.$select).filter(function(index) {
                     return $.inArray($(this).val(), values) !== -1;
                 }).prop('selected', false);
-
+                
                 if (this.options.selectedClass) {
                     $("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").removeClass(this.options.selectedClass);
                 }
@@ -1356,68 +1356,16 @@
             else {
                 $("li input[type='checkbox']:enabled", this.$ul).prop('checked', false);
                 $("option:enabled", this.$select).prop('selected', false);
-
+                
                 if (this.options.selectedClass) {
                     $("li:not(.divider):not(.disabled)", this.$ul).removeClass(this.options.selectedClass);
                 }
             }
         },
 
-        /**
-         * Set the current selection
-         *
-         * Helper function to set which options are currently selected by invoking
-         * 'select' for all unselected values that appear in the given list and
-         * invoking 'deselect' for all selected values that do NOT appear in the
-         * given list
-         *
-         * @param {Array} selection
-         * @param {Boolean} triggerOnChange
-         */
-        setSelected: function (selection, triggerOnChange) {
-            if (!$.isArray(selection)) {
-                selection = [selection];
-            }
-
-            // Get all of the enabled options
-            var opts = $("option:enabled", this.$select);
-            var selectedOpts = opts.filter(":selected");
-            var notSelectedOpts = opts.not(":selected");
-            var values;
-            var val;
-
-            // Find all the not-selected options
-            values = notSelectedOpts.map(function () {
-                // If their value is in the array, it should be selected so
-                // return that value (otherwise, return null to omit it from the result)
-                val = $(this).val();
-                return ($.inArray(val, selection) > -1) ? val : null;
-            }).get();
-
-            if ( values.length )
-            {
-                // Select all that need to be selected
-                this.select(values, triggerOnChange);
-            }
-
-            // Find all the selected options
-            values = selectedOpts.map(function () {
-                // If their value is NOT in the array, it should be deselected so
-                // return that value (otherwise, return null to omit it from the result)
-                val = $(this).val();
-                return ($.inArray(val, selection) == -1) ? val : null;
-            }).get();
-
-            if ( values.length )
-            {
-                // Deselect all that should not be selected
-                this.deselect(values, triggerOnChange);
-            }
-        },
-
         /**
          * Rebuild the plugin.
-         *
+         * 
          * Rebuilds the dropdown, the filter and the select all option.
          */
         rebuild: function() {
@@ -1432,14 +1380,14 @@
 
             this.updateButtonText();
             this.updateSelectAll(true);
-
+            
             if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {
                 this.disable();
             }
             else {
                 this.enable();
             }
-
+            
             if (this.options.dropRight) {
                 this.$ul.addClass('pull-right');
             }
@@ -1449,21 +1397,21 @@
          * The provided data will be used to build the dropdown.
          */
         dataprovider: function(dataprovider) {
-
+            
             var groupCounter = 0;
             var $select = this.$select.empty();
-
+            
             $.each(dataprovider, function (index, option) {
                 var $tag;
-
+                
                 if ($.isArray(option.children)) { // create optiongroup tag
                     groupCounter++;
-
+                    
                     $tag = $('<optgroup/>').attr({
                         label: option.label || 'Group ' + groupCounter,
                         disabled: !!option.disabled
                     });
-
+                    
                     forEach(option.children, function(subOption) { // add children option tags
                         $tag.append($('<option/>').attr({
                             value: subOption.value,
@@ -1485,10 +1433,10 @@
                     });
                     $tag.text(option.label || option.value);
                 }
-
+                
                 $select.append($tag);
             });
-
+            
             this.rebuild();
         },
 
@@ -1548,7 +1496,7 @@
                 var checkedBoxesLength = allBoxes.filter(":checked").length;
                 var selectAllLi  = $("li.multiselect-all", this.$ul);
                 var selectAllInput = selectAllLi.find("input");
-
+                
                 if (checkedBoxesLength > 0 && checkedBoxesLength === allBoxesLength) {
                     selectAllInput.prop("checked", true);
                     selectAllLi.addClass(this.options.selectedClass);
@@ -1571,7 +1519,7 @@
          */
         updateButtonText: function() {
             var options = this.getSelected();
-
+            
             // First update the displayed button text.
             if (this.options.enableHTML) {
                 $('.multiselect .multiselect-selected-text', this.$container).html(this.options.buttonText(options, this.$select));
@@ -1579,7 +1527,7 @@
             else {
                 $('.multiselect .multiselect-selected-text', this.$container).text(this.options.buttonText(options, this.$select));
             }
-
+            
             // Now update the title attribute of the button.
             $('.multiselect', this.$container).attr('title', this.options.buttonTitle(options, this.$select));
         },
@@ -1665,7 +1613,7 @@
             // Call multiselect method.
             if (typeof option === 'string') {
                 data[option](parameter, extraOptions);
-
+                
                 if (option === 'destroy') {
                     $(this).data('multiselect', false);
                 }
diff --git a/index.html b/index.html
index 69de2b31..2574868b 100644
--- a/index.html
+++ b/index.html
@@ -46,19 +46,19 @@
                     <div class="page-header">
                         <h1>Bootstrap Multiselect</h1>
                     </div>
-
+                    
                     <p class="alert alert-warning">
                         <b>Some option names may have changed during the last few commits!</b>
                     </p>
-
+                    
                     <p class="alert alert-info">
                         <b>Please consult the <a href="#faq">FAQ</a> and the <a href="https://github.com/davidstutz/bootstrap-multiselect/issues">Issue Tracker</a> before creating a new issue.</b>
                     </p>
-
+                    
                     <p class="alert alert-info">
                         <b>Please have a look at <a href="#how-to-contribute">How to contribute?</a> and the <a href="https://github.com/davidstutz/bootstrap-multiselect/issues">Issue Tracker</a>.</b>
                     </p>
-
+                    
                     <div class="page-header">
                         <h2 id="getting-started">Getting Started</h2>
                     </div>
@@ -147,11 +147,11 @@ <h3>Call the Plugin</h3>
                             </div>
                         </li>
                     </ol>
-
+                    
                     <div class="page-header">
                         <h2 id="configuration-options">Configuration Options</h2>
                     </div>
-
+                    
                     <table class="table table-condensed">
                         <thead>
                             <tr>
@@ -233,11 +233,11 @@ <h2 id="configuration-options">Configuration Options</h2>
                             </tr>
                         </tbody>
                     </table>
-
+                    
                     <p class="alert alert-info">
                         Use Firebug, Chrome Developer Tools to get the best out of the below examples.
                     </p>
-
+                    
                     <table class="table">
                         <tbody>
                             <tr>
@@ -246,7 +246,7 @@ <h2 id="configuration-options">Configuration Options</h2>
                                     <p>
                                         <code>multiple</code> is not a real configuration option. It refers to the <code>multiple</code> attribute of the <code>select</code> the plugin is applied on. When the <code>multiple</code> attribute of the <code>select</code> is present, the plugin uses checkboxes to allow multiple selections. If it is not present, the plugin uses radio buttons to allow single selections. When using the plugin for single selections (without the <code>multiple</code> attribute present), the first option will automatically be selected if no other option is selected in advance. See <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/129">#129</a> for how to avoid this behavior.
                                     </p>
-
+                                    
                                     <p>
                                         The following example shows the default behavior when the <code>multiple</code> attribute is omitted:
                                     </p>
@@ -282,11 +282,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/select&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>
                                         If multiple options are selected in advance and the <code>select</code> lacks the <code>multiple</code> attribute, the last option marked as <code>selected</code> will initially be selected by the plugin.
                                     </p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -319,11 +319,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/select&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>
                                         The following example shows the default behavior when the <code>multiple</code> attribute is present. Initially selected options will be adopted automatically:
                                     </p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -355,7 +355,7 @@ <h2 id="configuration-options">Configuration Options</h2>
     &lt;option value="6"&gt;Option 6&lt;/option&gt;
 &lt;/select&gt;
 </pre>
-
+                                    
                                     <p>
                                         The plugin naturally supports <code>optgroup</code>'s, however the group headers are not clickable by default. See the <code>enableClickableOptGroups</code> option for details.
                                     </p>
@@ -496,11 +496,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>
                                         Note that this option does also work with disabled options:
                                     </p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -534,11 +534,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>
                                         Note that the behavior of <code>onChange</code> changes. Whenever an optgroup is changed/clicked, the <code>onChange</code> event is fired with all affected options as first parameter.
                                     </p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -680,11 +680,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>
                                         The <code>disabledText</code> option does also work when the underlying <code>select</code> is disabled:
                                     </p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -721,11 +721,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/select&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>
                                         Note that selected options will still be shown:
                                     </p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -809,11 +809,11 @@ <h2 id="configuration-options">Configuration Options</h2>
                                     <p>
                                         The dropdown can also be dropped up. Note that it is recommended to also set <code>maxHeight</code>. The plugin calculates the necessary height of the dropdown and takes the minimum of the calculated value and <code>maxHeight</code>.
                                     </p>
-
+                                    
                                     <p class="alert alert-warning">
                                         Note that this feature has been introduced in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/594">#594</a> and is known to have issues depending on the environment.
                                     </p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -988,7 +988,7 @@ <h2 id="configuration-options">Configuration Options</h2>
                                     <p class="alert alert-warning">
                                         Note that the behavior of <code>onChange</code> changes when setting <code>enableClickableOptGroups</code> to <code>true</code>.
                                     </p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -1088,7 +1088,7 @@ <h2 id="configuration-options">Configuration Options</h2>
                                     <p>
                                         A callback called when the dropdown is shown.
                                     </p>
-
+                                    
                                     <p class="alert alert-warning">
                                         The <code>onDropdownShow</code> option is not available when using Twitter Bootstrap 2.3.
                                     </p>
@@ -1137,7 +1137,7 @@ <h2 id="configuration-options">Configuration Options</h2>
                                     <p class="alert alert-warning">
                                         The <code>onDropdownHide</code> option is not available when using Twitter Bootstrap 2.3.
                                     </p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -1182,7 +1182,7 @@ <h2 id="configuration-options">Configuration Options</h2>
                                     <p class="alert alert-warning">
                                         The <code>onDropdownShown</code> option is not available when using Twitter Bootstrap 2.3.
                                     </p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -1227,7 +1227,7 @@ <h2 id="configuration-options">Configuration Options</h2>
                                     <p class="alert alert-warning">
                                         The <code>onDropdownHidden</code> option is not available when using Twitter Bootstrap 2.3.
                                     </p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -1408,9 +1408,9 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>Note that if the text in the button title is too long, it will be truncated and use an ellipsis</p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -1439,11 +1439,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>
                                         This does also work for long options:
                                     </p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -1719,11 +1719,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>
                                         This option may be useful in combination with the <code>includeSelectAllOption</code>:
                                     </p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -1754,11 +1754,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>
                                         Note that the <code>allSelectedText</code> is not shown if only one option is available.
                                     </p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -1852,7 +1852,7 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;script type=&quot;text/javascript&quot;&gt;
     $(document).ready(function() {
         $('#example-delimiterText').multiselect({
-            delimiterText '; '
+            delimiterText '; ' 
         });
     });
 &lt;/script&gt;
@@ -1922,7 +1922,7 @@ <h2 id="configuration-options">Configuration Options</h2>
                                                 $('#example-optionClass').multiselect({
                                                     optionClass: function(element) {
                                                         var value = $(element).val();
-
+                                                        
                                                         if (value%2 == 0) {
                                                             return 'even';
                                                         }
@@ -2047,7 +2047,7 @@ <h2 id="configuration-options">Configuration Options</h2>
                                     <p class="alert alert-info">
                                         To see an example using both the select all option and the filter, see the documentation of the <code>enableFiltering</code> option.
                                     </p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -2076,11 +2076,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>
                                         The <code>includeSelectAllOption</code> option can also be used in combination with <code>optgroup</code>'s.
                                     </p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -2113,11 +2113,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>
                                         Note that the select all does not trigger the <code>onChange</code> event and only triggers the <code>onSelectAll</code> event:
                                     </p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -2162,7 +2162,7 @@ <h2 id="configuration-options">Configuration Options</h2>
                                     <p>
                                         Setting both <code>includeSelectAllOption</code> and <code>enableFiltering</code> to <code>true</code>, the select all option does always select only the visible option. With setting <code>selectAllJustVisible</code> to <code>false</code> this behavior is changed such that always all options (irrespective of whether they are visible) are selected.
                                     </p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -2277,9 +2277,9 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>The <code>selectAllValue</code> option should usually be a string, however, numeric values work as well:</p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -2483,11 +2483,11 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>
                                         The <code>enableFiltering</code> option can easily be used in combination with the <code>includeSelectAllOption</code> option:
                                     </p>
-
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {
@@ -2527,7 +2527,7 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>
                                         The <code>enableFiltering</code> option can also be used in combination with <code>optgroup</code>'s.
                                     </p>
@@ -2563,7 +2563,7 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>
                                         Clickable <code>optgroup</code>'s are also supported:
                                     </p>
@@ -2601,7 +2601,7 @@ <h2 id="configuration-options">Configuration Options</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>
                                         Finally, the option can also be used together with <code>onChange</code> or similar events:
                                     </p>
@@ -2896,20 +2896,20 @@ <h2 id="configuration-options">Configuration Options</h2>
                     <div class="page-header">
                         <h2 id="templates">Templates</h2>
                     </div>
-
-
+                    
+                    
                     <p>
                         The generated HTML markup can be controlled using templates. Basically, templates are simple configuration options. The default templates are shown below:
                     </p>
-
+                    
                     <p class="alert alert-warning">
                         However, note that messing with the template's classes may cause unexpected behavior. For example the button should always have the class <code>.multiselect</code>,
                     </p>
-
+                    
                     <p class="alert alert-info">
                         In addition, note that other options may also have influence on the templates, for example the <code>buttonClass</code> option.
                     </p>
-
+                    
 <pre class="prettyprint linenums">
 &lt;script type=&quot;text/javascript&quot;&gt;
     $(document).ready(function() {
@@ -2927,11 +2927,11 @@ <h2 id="templates">Templates</h2>
     });
 &lt;/script&gt;
 </pre>
-
+                    
                     <p>
                         For example other elements instead of buttons may be used by adapting the template:
                     </p>
-
+                    
                     <div class="example">
                         <script type="text/javascript">
                             $(document).ready(function() {
@@ -2983,7 +2983,7 @@ <h2 id="templates">Templates</h2>
 &lt;/style&gt;
 </pre>
                     </div>
-
+                    
                     <div class="page-header">
                         <h2 id="methods">Methods</h2>
                     </div>
@@ -3235,11 +3235,11 @@ <h2 id="methods">Methods</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>
                                         The method provides an additional parameter: <code>.multiselect('select', value, triggerOnChange)</code>. If the second parameter is set to true, the method will manually trigger the <code>onChange</code> option.
                                     </p>
-
+                                    
                                     <div class="example">
                                         <div class="btn-group">
                                             <script type="text/javascript">
@@ -3285,11 +3285,11 @@ <h2 id="methods">Methods</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>
                                         The above parameter does also work when selecting multipe values. Note that <code>onChange</code> is called for each selected option individually!
                                     </p>
-
+                                    
                                     <div class="example">
                                         <div class="btn-group">
                                             <script type="text/javascript">
@@ -3387,11 +3387,11 @@ <h2 id="methods">Methods</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>
                                         The method provides an additional parameter: <code>.multiselect('deselect', value, triggerOnChange)</code>. If the second parameter is set to true, the method will manually trigger the <code>onChange</code> option.
                                     </p>
-
+                                    
                                     <div class="example">
                                         <div class="btn-group">
                                             <script type="text/javascript">
@@ -3437,11 +3437,11 @@ <h2 id="methods">Methods</h2>
 &lt;/script&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>
                                         The above parameter does also work when deselecting multiple options. Note that <code>onChange</code> is called for each deselected option individually.
                                     </p>
-
+                                    
                                     <div class="example">
                                         <div class="btn-group">
                                             <script type="text/javascript">
@@ -3485,160 +3485,6 @@ <h2 id="methods">Methods</h2>
         });
     });
 &lt;/script&gt;
-</pre>
-                                    </div>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <code>.multiselect('setSelected', selection)</code>
-                                </td>
-                                <td>
-                                    <p>
-                                        Explicitly sets which options are selected (also works with an array of values).  Any currently selected options
-                                        that do not appear in the given array will be deselected.  Any deselected options that do appear in the given array
-                                        will be selected.
-                                    </p>
-
-                                    <div class="example">
-                                        <div class="btn-group">
-                                            <script type="text/javascript">
-                                                $(document).ready(function() {
-                                                    $('#example-setSelected').multiselect();
-
-                                                    $('#example-setSelected-button').on('click', function() {
-                                                        $('#example-setSelected').multiselect('setSelected', ['1', '2', '4']);
-
-                                                        alert('Selected 1, 2 and 4.  Deselected 3, 5, and 6.');
-                                                    });
-                                                });
-                                            </script>
-                                            <div class="btn-group">
-                                                <select id="example-setSelected" multiple="multiple">
-                                                    <option value="1">Option 1</option>
-                                                    <option value="2">Option 2</option>
-                                                    <option value="3" selected="selected">Option 3</option>
-                                                    <option value="4">Option 4</option>
-                                                    <option value="5" selected="selected">Option 5</option>
-                                                    <option value="6" selected="selected">Option 6</option>
-                                                </select>
-                                                <button id="example-setSelected-button" class="btn btn-default">Set the Selection...</button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="highlight">
-<pre class="prettyprint linenums">
-&lt;script type=&quot;text/javascript&quot;&gt;
-    $(document).ready(function() {
-        $('#example-setSelected').multiselect();
-
-        $('#example-setSelected-button').on('click', function() {
-            $('#example-setSelected').multiselect('setSelected', ['1', '2', '4']);
-
-            alert('Selected 1, 2 and 4.  Deselected 3, 5, and 6.');
-        });
-    });
-&lt;/script&gt;
-</pre>
-                                    </div>
-
-                                    <p>
-                                        The method provides an additional parameter: <code>.multiselect('setSelected', selection, triggerOnChange)</code>. If the third parameter is set to true, the method will manually trigger the <code>onChange</code> option.
-                                    </p>
-
-                                    <div class="example">
-                                        <div class="btn-group">
-                                            <script type="text/javascript">
-                                                $(document).ready(function() {
-                                                    $('#example-setSelected-onChange').multiselect({
-                                                        onChange: function(option, checked, select) {
-                                                            alert('onChange triggered: ' + $(option).val() + ' was ' + (checked ? '' : 'de') + 'selected.');
-                                                        }
-                                                    });
-
-                                                    $('#example-setSelected-onChange-button').on('click', function() {
-                                                        $('#example-setSelected-onChange').multiselect('setSelected', '1', true);
-                                                    });
-                                                });
-                                            </script>
-                                            <div class="btn-group">
-                                                <select id="example-setSelected-onChange" multiple="multiple">
-                                                    <option value="1">Option 1</option>
-                                                    <option value="2" selected="selected">Option 2</option>
-                                                    <option value="3">Option 3</option>
-                                                    <option value="4">Option 4</option>
-                                                    <option value="5">Option 5</option>
-                                                    <option value="6">Option 6</option>
-                                                </select>
-                                                <button id="example-setSelected-onChange-button" class="btn btn-default">Set Selected</button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="highlight">
-<pre class="prettyprint linenums">
-&lt;script type=&quot;text/javascript&quot;&gt;
-    $(document).ready(function() {
-        $('#example-setSelected-onChange').multiselect({
-            onChange: function(option, checked, select) {
-                alert('onChange triggered: ' + $(option).val() + ' was ' + (checked ? '' : 'de') + 'selected.');
-            }
-        });
-
-        $('#example-setSelected-onChange-button').on('click', function() {
-            $('#example-setSelected-onChange').multiselect('setSelected', '1', true);
-        });
-    });
-&lt;/script&gt;
-</pre>
-                                    </div>
-
-                                    <p>
-                                        The above parameter also works when multiple options change (selected or deselected). Note that <code>onChange</code> is called for each selected and deselected option individually.
-                                    </p>
-
-                                    <div class="example">
-                                        <div class="btn-group">
-                                            <script type="text/javascript">
-                                                $(document).ready(function() {
-                                                    $('#example-setSelected-onChange-array').multiselect({
-                                                        onChange: function(option, checked, select) {
-                                                            alert('onChange triggered: ' + $(option).val() + ' was ' + (checked ? '' : 'de') + 'selected.');
-                                                        }
-                                                    });
-
-                                                    $('#example-setSelected-onChange-array-button').on('click', function() {
-                                                        $('#example-setSelected-onChange-array').multiselect('setSelected', ['2', '4'], true);
-                                                    });
-                                                });
-                                            </script>
-                                            <div class="btn-group">
-                                                <select id="example-setSelected-onChange-array" multiple="multiple">
-                                                    <option value="1" selected="selected">Option 1</option>
-                                                    <option value="2">Option 2</option>
-                                                    <option value="3" selected="selected">Option 3</option>
-                                                    <option value="4">Option 4</option>
-                                                    <option value="5">Option 5</option>
-                                                    <option value="6">Option 6</option>
-                                                </select>
-                                                <button id="example-setSelected-onChange-array-button" class="btn btn-default">Change Multiple Selections</button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="highlight">
-<pre class="prettyprint linenums">
-&lt;script type=&quot;text/javascript&quot;&gt;
-    $(document).ready(function() {
-        $('#example-setSelected-onChange-array').multiselect({
-            onChange: function(option, checked, select) {
-                alert('onChange triggered: ' + $(option).val() + ' was ' + (checked ? '' : 'de') + 'selected.');
-            }
-        });
-
-        $('#example-setSelected-onChange-array-button').on('click', function() {
-            $('#example-setSelected-onChange-array').multiselect('setSelected', ['2','4'], true);
-        });
-    });
-&lt;/script&gt;
 </pre>
                                     </div>
                                 </td>
@@ -3655,11 +3501,11 @@ <h2 id="methods">Methods</h2>
                                     <p class="alert alert-info">
                                         Note that setting <code>justVisible</code> to <code>true</code>, or providing no parameter will select all visible options, that is the dropdown needs to be opened.
                                     </p>
-
+                                    
                                     <p class="alert alert-info">
                                         Currently, it is required to call <code>.multiselect('updateButtonText')</code> manually after calling <code>.multiselect('selectAll', justVisible)</code>.
                                     </p>
-
+                                    
                                     <div class="example">
                                         <div class="btn-group">
                                             <script type="text/javascript">
@@ -3722,11 +3568,11 @@ <h2 id="methods">Methods</h2>
                                     <p class="alert alert-info">
                                         Note that setting <code>justVisible</code> to <code>true</code>, or providing no parameter will select all visible options, that is the dropdown needs to be opened.
                                     </p>
-
+                                    
                                     <p class="alert alert-info">
                                         Currently, it is required to call <code>.multiselect('updateButtonText')</code> manually after calling <code>.multiselect('selectAll', justVisible)</code>.
                                     </p>
-
+                                    
                                     <div class="example">
                                         <div class="btn-group">
                                             <script type="text/javascript">
@@ -3785,11 +3631,11 @@ <h2 id="methods">Methods</h2>
                                     <p>
                                         When manually selecting/deselecting options and the corresponding checkboxes, this function updates the text and title of the button.
                                     </p>
-
+                                    
                                     <p class="alert alert-info">
                                         Note that usually this method is only needed when using <code>.multiselect('selectAll', justVisible)</code> or <code>.multiselect('deselectAll', justVisible)</code>. In all other cases, <code>.multiselect('refresh')</code> should be used.
                                     </p>
-
+                                    
                                     <div class="example">
                                         <div class="btn-group">
                                             <script type="text/javascript">
@@ -3801,10 +3647,10 @@ <h2 id="methods">Methods</h2>
                                                     $('#example-updateButtonText-select').on('click', function() {
                                                         $('option[value="1"]', $('#example-updateButtonText')).prop('selected', true);
                                                         $('option[value="3"]', $('#example-updateButtonText')).prop('selected', true);
-
+                                                        
                                                         $('input[value="1"]', $('#example-updateButtonText-container')).prop('checked', true);
                                                         $('input[value="3"]', $('#example-updateButtonText-container')).prop('checked', true);
-
+                                                        
                                                         $('input[value="1"]', $('#example-updateButtonText-container')).closest('li').addClass('active');
                                                         $('input[value="3"]', $('#example-updateButtonText-container')).closest('li').addClass('active');
                                                     });
@@ -3834,7 +3680,7 @@ <h2 id="methods">Methods</h2>
         $('#example-deselectAll').multiselect();
 
         $('#example-deselectAll-visible').on('click', function() {
-
+            
             $('#example-deselectAll').multiselect('updateButtonText', true);
         });
     });
@@ -4094,11 +3940,11 @@ <h2 id="methods">Methods</h2>
 &lt;select id=&quot;example-dataprovider&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
 </pre>
                                     </div>
-
+                                    
                                     <p>
                                         The method is also able to handle <code>optgroup</code>'s:
                                     </p>
-
+                                    
                                     <div class="example">
                                         <div class="btn-group">
                                             <script type="text/javascript">
@@ -4169,17 +4015,17 @@ <h2 id="methods">Methods</h2>
                                             <script type="text/javascript">
                                                 $(document).ready(function() {
                                                     $('#example-set-all-selected-text').multiselect({allSelectedText: "Initial All Selected"});
-
+                                                    
                                                     $('#new-all-selected-text-btn').click(function(){
-                                                        $('#example-set-all-selected-text').multiselect('setAllSelectedText', $('#new-all-selected-text-box').val());
+                                                        $('#example-set-all-selected-text').multiselect('setAllSelectedText', $('#new-all-selected-text-box').val());                                                        
                                                     });
                                                 });
                                             </script>
-
+                                            
                                             <select id="example-set-all-selected-text" multiple="multiple">
                                                 <option value="1" selected>Option 1</option>
                                             </select>
-
+                                            
                                             <input id="new-all-selected-text-box" type="text" class="form-control" placeholder="Enter new text"/>
                                             <input id="new-all-selected-text-btn" type="button" class="btn btn-default" value="Change All Selected Text"/>
                                         </div>
@@ -4188,9 +4034,9 @@ <h2 id="methods">Methods</h2>
 <pre class="prettyprint linenums">
 &lt;script type=&quot;text/javascript&quot;&gt;
     $('#example-set-all-selected-text').multiselect({allSelectedText: "Initial All Selected"});
-
+                                                    
     $('#new-all-selected-text-btn').click(function(){
-        $('#example-set-all-selected-text').multiselect('setAllSelectedText', $('#new-all-selected-text-box').val());
+        $('#example-set-all-selected-text').multiselect('setAllSelectedText', $('#new-all-selected-text-box').val());                                                        
     });
 &lt;/script&gt;
 </pre>
@@ -4262,7 +4108,7 @@ <h2 id="further-examples">Further Examples</h2>
                     </div>
 
                     <p>
-                        The above approach can also be adapted to be used in
+                        The above approach can also be adapted to be used in 
                     </p>
 
                     <div class="example">
@@ -4311,7 +4157,7 @@ <h2 id="further-examples">Further Examples</h2>
 &lt;/script&gt;
 </pre>
                     </div>
-
+                    
                     <p>
                         Limit the number of selected options using the <code>onChange</code> option. The user may only select a maximum of 4 options. Then all other options are disabled.
                     </p>
@@ -4595,7 +4441,7 @@ <h2 id="further-examples">Further Examples</h2>
                     <p>
                         Using a reset button together with a multiselect.
                     </p>
-
+                    
                     <div class="example">
                         <script type="text/javascript">
                             $(document).ready(function() {
@@ -4652,11 +4498,11 @@ <h2 id="further-examples">Further Examples</h2>
 &lt;/form&gt;
 </pre>
                     </div>
-
+                    
                     <p>
                         Multiselect can also be used in modals:
                     </p>
-
+                    
                     <div class="example">
                         <script type="text/javascript">
                             $(document).ready(function() {
@@ -4715,15 +4561,15 @@ <h4 class="modal-title">Bootstrap Multiselect</h4>
 &lt;/div&gt;
 </pre>
                     </div>
-
+                    
                     <p>
                         An example of using multiselect in an accordion/collapse:
                     </p>
-
+                    
                     <p class="alert alert-info">
                         Note that the overflow of the <code>.panel</code> needs to be visible: <code>style="overflow:visible;"</code>. See the example below.
                     </p>
-
+                    
                     <div class="example">
                         <script type="text/javascript">
                             $(document).ready(function() {
@@ -4786,7 +4632,7 @@ <h4 class="panel-title">
 &lt;/div&gt;
 </pre>
                     </div>
-
+                    
                     <p>
                         The examples below are aimed to demonstrate the performance of several features when using a large number of options:
                     </p>
@@ -4796,25 +4642,25 @@ <h4 class="panel-title">
                         <li>Additionally using <code>enableClickableOptGroups</code>.</li>
                         <li>Resetting the multiselect.</li>
                     </ul>
-
+                    
                     <p class="alert alert-warning">
                         The below examples need to be activated. <b>Note that this may take some time!</b><br>
                     </p>
-
+                    
                     <p class="alert alert-info">
                         Use <input type="text" id="example-large-options" value="1000" style="width: 50px;margin: 0px 4px;"/> options: <button id="example-large-enable" class="btn btn-primary">Enable Examples</button>
                     </p>
-
+                    
                     <div id="example-large-error">
-
+                        
                     </div>
-
+                    
                     <div class="example">
                         <script type="text/javascript">
                             $(document).ready(function() {
                                 $('#example-large-enable').on('click', function() {
                                     var options = $('#example-large-options').val();
-
+                                    
                                     if (options < 1 || options > 5000) {
                                         $('#example-large-error').html('<p class="alert alert-error">Choose between 1 and 5000 options!</p>');
                                     }
@@ -4823,19 +4669,19 @@ <h4 class="panel-title">
                                         $('#example-large-includeSelectAllOption-enableFiltering').html('');
                                         $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').html('');
                                         $('#example-large-reset').html('');
-
+                                        
                                         for (var j = 0; j < options; j++) {
                                             i = j + 1;
                                             $('#example-large-includeSelectAllOption').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
                                             $('#example-large-includeSelectAllOption-enableFiltering').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
-
+                                            
                                             var group = Math.floor(j/10) + 1;
                                             var number = j % 10 + 1;
                                             if (number === 1) {
                                                 $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').append('<optgroup label="Group ' + group.toString() + '"></optgroup>');
                                             }
                                             $('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').append('<option value="' + group.toString() + '-' + number.toString() + '">Option ' + group.toString() + '.' + number.toString() + '</option>');
-
+                                            
                                             $('#example-large-reset').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
                                         }
 
@@ -4993,13 +4839,13 @@ <h4 class="panel-title">
 &lt;/form&gt;
 </pre>
                     </div>
-
+                    
                     <p>The following examples is aimed to demonstrate the performance of the <code>.multiselect('dataprovider', data)</code> for a large number of options.</p>
-
+                    
                     <p class="alert alert-warning">The below examples need to be activated. <b>Note that this may take some time!</b></p>
-
+                    
                     <p class="alert alert-info"><button id="example-large-dataprovider-button" class="btn btn-primary">Activate</button></p>
-
+                    
                     <div class="example">
                         <script type="text/javascript">
                             $(document).ready(function() {
@@ -5012,10 +4858,10 @@ <h4 class="panel-title">
                                             value: i + '-' + j
                                         });
                                     }
-
+                                    
                                     data.push(group);
                                 }
-
+                                
                                 $('#example-large-dataprovider-button').on('click', function() {
                                     $('#example-large-dataprovider').multiselect({
                                         maxHeight: 200
@@ -5052,11 +4898,11 @@ <h4 class="panel-title">
 &lt;p class=&quot;alert alert-info&quot;&gt;&lt;button id=&quot;example-large-dataprovider-button&quot; class=&quot;btn btn-primary&quot;&gt;Activate&lt;/button&gt;&lt;/p&gt;
 &lt;select id=&quot;example-large-dataprovider&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
 </pre>
-
+                    
                     <p>
                         The following example illsutrates how to disable options using JavaScript.
                     </p>
-
+                    
                     <div class="example">
                         <script type="text/javascript">
                             $(document).ready(function() {
@@ -5104,15 +4950,15 @@ <h4 class="panel-title">
 });
 &lt;select id=&quot;example-disable-javascript&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
 </pre>
-
+                        
                     <p>
                         Performance example for using <code>.multiselect('refresh')</code> with a large number of options:
                     </p>
 
                     <p class="alert alert-warning">The below examples need to be activated. <b>Note that this may take some time!</b></p>
-
+                    
                     <p class="alert alert-info"><button id="example-large-refresh-button" class="btn btn-primary">Activate</button></p>
-
+                    
                     <div class="example">
                         <script type="text/javascript">
                             $(document).ready(function() {
@@ -5120,34 +4966,34 @@ <h4 class="panel-title">
                                     for (var i = 0; i < 1000; i++) {
                                         $('#example-large-refresh').append('<option value="' + i + '">Option ' + i + '</option>');
                                     }
-
+                                    
                                     $('#example-large-refresh').multiselect();
                                 });
-
+                                
                                 $('#example-large-refresh-refresh').on('click', function() {
                                     $('#example-large-refresh').multiselect('refresh');
                                 });
-
+                                
                                 $('#example-large-refresh-select').on('click', function() {
                                     var count = 0;
-
+                                    
                                     $('#example-large-refresh option').each(function() {
                                         var i = $(this).val();
-
+                                        
                                         if (i%2 == 0) {
                                             $(this).prop('selected', true);
                                             count++;
                                         }
-
+                                        
                                     });
-
+                                    
                                     alert('Selected ' + count + ' options!');
                                 });
                             });
                         </script>
                         <div class="btn-group">
                             <select id="example-large-refresh" multiple="multiple">
-
+                                
                             </select>
                             <button id="example-large-refresh-select" class="btn btn-default">Select every second option ...</button>
                             <button id="example-large-refresh-refresh" class="btn btn-primary">Refresh!</button>
@@ -5188,19 +5034,19 @@ <h4 class="panel-title">
 &lt;/script&gt;
 </pre>
                     </div>
-
+                        
                     <div class="page-header">
                         <h2 id="post">Server-Side Processing</h2>
                     </div>
-
+                    
                     <p class="alert alert-warning">
                         The below example uses a PHP script to demonstrate Server-Side Processing. Therefore, the below example will not run online - <b>download the repository and try it on a local server</b>.
                     </p>
-
+                    
                     <p>
                         In order to receive the correct data after submitting the form, the used <code>select</code> has to have an appropriate name. Note that an <code>[]</code> needs to be appended to the name when using the <code>multiple</code> option/attribute. Per default, the checkboxes used within the multiselect will not be submitted, however, this can be changed by adapting <code>checkboxName</code>. The select all option as well as the text input used for the filter will not be submitted. As this may be useful, the name of the select all checkbox may be adapted using the <code>selectAllName</code> option. The value of the select all checkbox can be controlled by the <code>selectAllValue</code> option while the values of the remaining checkboxes correspond to the values used by the <code>option</code>'s of the original <code>select</code>.
                     </p>
-
+                    
                     <div class="example">
                         <script type="text/javascript">
                             $(document).ready(function() {
@@ -5321,11 +5167,11 @@ <h2 id="post">Server-Side Processing</h2>
 &lt;/form&gt;
 </pre>
                     </div>
-
+                    
                     <div class="page-header">
                         <h2 id="keyboard-support">Keyboard Support</h2>
                     </div>
-
+                    
                     <table class="table table-striped">
                         <tbody>
                             <tr>
@@ -5342,11 +5188,11 @@ <h2 id="keyboard-support">Keyboard Support</h2>
                             </tr>
                         </tbody>
                     </table>
-
+                    
                     <div class="page-header">
                         <h2 id="faq">Frequently Asked Questions</h2>
                     </div>
-
+                    
                     <dl>
                         <dt id="how-to-contribute">How to contribute?</dt>
                         <dd>
@@ -5359,42 +5205,42 @@ <h2 id="faq">Frequently Asked Questions</h2>
                             </ul>
                             A full list of contributors can be found <a href="https://github.com/davidstutz/bootstrap-multiselect/graphs/contributors">here</a>.
                         </dd>
-
+                        
                         <dt>How about older browsers as for example Internet Explorer 6, 7 and 8?</dt>
                         <dd>
                             With version 2.0, jQuery no longer supports the older IE versions. Nevertheless, the plugin should run as expected using the 1.x branch of jQuery. See <a href="http://blog.jquery.com/2013/04/18/jquery-2-0-released/">here</a> for details.
                         </dd>
-
+                        
                         <dt>May I use the plugin in a commercial project (e.g. a commercial Wordpress/Joomla theme)?</dt>
                         <dd>
                             The plugin is dual licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a> and the <a href="http://opensource.org/licenses/BSD-3-Clause">BSD 3-Clause License</a>. The BSD 3-Clause License allows to use the plugin in commercial projects as long as all source files associated with this plugin retain the copyright notice.
                         </dd>
-
+                        
                         <dt>Using <code>return false;</code> within the <code>onChange</code> option does not prevent the option from being selected/deselected ...</dt>
                         <dd>
                             The <code>return</code> statement within the <code>onChange</code> method has no influence on the result. For preventing an option from being deselected or selected have a look at the examples in the <a href="#further-examples">Further Examples</a> section.
                         </dd>
-
+                        
                         <dt>How to change the button class depending on the number of selected options?</dt>
                         <dd>
                             This issue is addressed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/332">332</a>.
                         </dd>
-
+                        
                         <dt>Why does the plugin crash when using <code>.multiselect('select', value);</code> or <code>.multiselect('deselect', value);</code>?</dt>
                         <dd>
                             This may be caused when the class used for the <code>select</code> occurs for other elements, as well. In addition this may be caused if the multiselect has the class <code>.multiselect</code>. See <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/330">#330</a>.
                         </dd>
-
+                        
                         <dt>How to check whether filtering all options resulted no options being displayed (except the select all option)?</dt>
                         <dd>
                             This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/317">#317</a>.
                         </dd>
-
+                        
                         <dt>How to use multiple plugin instances running single selections on one page?</dt>
                         <dd>
                             There is a minor bug when using multiple plugin instances with single selection on one page. The bug is described here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/331">#331</a>. A possible fix is suggested here: <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/336">#336</a>.
                         </dd>
-
+                        
                         <dt>How to use the plugin within a <code>form.form-inline</code>?</dt>
                         <dd>
                             This issue is addressed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/322">#322</a>
@@ -5424,17 +5270,17 @@ <h2 id="faq">Frequently Asked Questions</h2>
 });
 </pre>
                         </dd>
-
+                        
                         <dt>Why does the plugin not work in Chrome for Mobile?</dt>
                         <dd>
                             This may be caused by several reasons one of which is described and resolved here: <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/223">#223</a>.
                         </dd>
-
+                        
                         <dt>How to underline the searched text when using the filter?</dt>
                         <dd>
                             This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/309">#309</a>.
                         </dd>
-
+                        
                         <dt>How to hide the checkboxes?</dt>
                         <dd>
                             A related issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/205">#205</a> and includes a possible solution when using CSS to hide the checkboxes:
@@ -5444,7 +5290,7 @@ <h2 id="faq">Frequently Asked Questions</h2>
 }
 </pre>
                         </dd>
-
+                        
                         <dt>How to use Bootstrap Multiselect using <code>$.validate</code>?</dt>
                         <dd>
                             This topic is discussed in issue <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/347">#347</a>. The fix suggested is as follows:
@@ -5454,27 +5300,27 @@ <h2 id="faq">Frequently Asked Questions</h2>
 validator.settings.ignore = ':hidden:not(".multiselect")';
 </pre>
                         </dd>
-
+                        
                         <dt>How to prevent the plugin from selecting the first option in single select mode?</dt>
                         <dd>
                             This issue is mainly due to the default behavior of most browsers. A workaround can be found here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/129">#129</a>.
                         </dd>
-
+                        
                         <dt>Which are the minimum required components of Twitter Botostrap to get the plugin working?</dt>
                         <dd>
                             The plugin needs at least the styles for forms and dropdowns. In addition the JavaScript dropdown plugin from Twitter Bootstrap is required. Details can be found here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/344">#344</a>.
                         </dd>
-
+                        
                         <dt>How to use the <code>.multiselect('dataprovider', data)</code> method?</dt>
                         <dd>
                             Have a look at the <a href="#methods">Methods</a> section. In the past, there has been some confusion about how the method handles option groups. If the documentation does not help you, have a look at the issue tracker, as for example issue <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/356">#356</a>.
                         </dd>
-
+                        
                         <dt>A <code>type="reset"</code> button does not refresh the multiselect, what to do?</dt>
                         <dd>
                             Have a look at the <a href="#further-examples">Further Examples</a> section (in addition, issue <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/360">360</a> discussed this).
                         </dd>
-
+                        
                         <dt>Using multiple <code>select</code>'s in single selection mode with <code>option</code>'s sharing values across the different <code>select</code>'s.</dt>
                         <dd>
                             This issue is discussed in detail here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/362">#362</a>. A simple solution is to use different option values for the option <code>checkboxName</code>:
@@ -5485,32 +5331,32 @@ <h2 id="faq">Frequently Asked Questions</h2>
 </pre>
                             where <code>_.uniqueId('multiselect_')</code> should be replaced with a random generator. Alternatively, a unique value for <code>checkboxName</code> can be used for each multiselect.
                         </dd>
-
+                        
                         <dt>How to avoid <code>TypeError: Cannot read property "toString" of ...</code>?</dt>
                         <dd>
                             This error may be thrown if <code>null</code> or <code>undefined</code> is provided as argument of <code>.multiselect('select', value)</code> or <code>.multiselect('deselect', value)</code>, see <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/386">#386</a>.
                         </dd>
-
+                        
                         <dt>Why is there no "uncheck all" option?</dt>
                         <dd>
                             This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/271">#271.</a>
                         </dd>
-
+                        
                         <dt>Esc does not close the dropdown?!</dt>
                         <dd>
                             This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/368">#368</a>. Currently, pressing <code>Esc</code> will not close the dropdown as there were some bugs with this.
                         </dd>
-
+                        
                         <dt>How to keep the dropdown open?</dt>
                         <dd>
                             This issue is discussed here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/426">#426</a>.
                         </dd>
-
+                        
                         <dt>Why is the dropdown not showing (or only partly shown) within modals?</dt>
                         <dd>
                             This is a general issue not directly related to Bootstrap Multiselect: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/455">#455</a>.
                         </dd>
-
+                        
                         <dt>How do add icons to the options (<a href="https://github.com/davidstutz/bootstrap-multiselect/issues/475">#475</a>)?</dt>
                         <dd>
                             Adapt the <code>optionLabel</code> option as follows:
@@ -5520,48 +5366,48 @@ <h2 id="faq">Frequently Asked Questions</h2>
 },
 </pre>
                         </dd>
-
+                        
                         <dt>How to add a deselect all functionality (the inverse to the select all option)?</dt>
                         <dd>
                             This issue was discussed in the following pull request: <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/487">#487</a>.
                         </dd>
-
+                        
                         <dt>How to bind object values using Knockout JS?</dt>
                         <dd>
                             This issue was discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/532">#532</a>.
                         </dd>
-
+                        
                         <dt>Options do net get updated when using Angular JS?</dt>
                         <dd>
                             This issues was discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/519">#519</a>.
                         </dd>
-
+                        
                         <dt>Is there a search event?</dt>
                         <dd>
                             This was discussed here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/530">#530</a>.
                         </dd>
                     </dl>
-
+                    
                     <div class="page-header">
                         <h2 id="known-issues">Known Issues</h2>
                     </div>
-
+                    
                     <dl>
                         <dt>Slow dropdown on Chrome 35.</dt>
                         <dd>
                             As discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/268">#268</a>, certain versions seem to have some performance problems, especially Chrome 35.0.1916.114m.
                         </dd>
-
+                        
                         <dt>Using <code>maxHeight</code> results in the filter being not fixed at the top.</dt>
                         <dd>
                             See issue <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/396"></a>. Pull requests are welcome.
                         </dd>
                     </dl>
-
+                    
                     <div class="page-header">
                         <h2 id="license">License</h2>
                     </div>
-
+                    
                     <dl>
                         <dt>Apache License, Version 2.0</dt>
                         <dd>
@@ -5591,7 +5437,7 @@ <h2 id="license">License</h2>
                             </p>
                         </dd>
                     </dl>
-
+                    
                     <hr>
                     <p>
                         &copy; 2012 - 2014
diff --git a/tests/spec/bootstrap-multiselect.js b/tests/spec/bootstrap-multiselect.js
index e9ae4391..2e9f1d5d 100644
--- a/tests/spec/bootstrap-multiselect.js
+++ b/tests/spec/bootstrap-multiselect.js
@@ -3,19 +3,19 @@ describe('Bootstrap Multiselect "Core".', function() {
 
     beforeEach(function() {
         var $select = $('<select id="multiselect" multiple="multiple"></select>');
-
+        
         for (var i = 1; i < 100; i++) {
             var $option = $('<option value="' + i + '">' + i + '</option>');
-
+            
             if (i < 10) {
                 $option.prop('selected', true);
             }
-
+            
             $select.append($option);
         }
-
+        
         $('body').append($select);
-
+        
         $select.multiselect({
             buttonContainer: '<div id="multiselect-container"></div>',
             onInitialized: function($select) {
@@ -23,182 +23,182 @@ describe('Bootstrap Multiselect "Core".', function() {
             }
         });
     });
-
+    
     it('Should add the container after the select.', function() {
         expect($('#multiselect-container').length).toBe(1);
     });
-
+    
     it('Should add the multiselect button.', function() {
         expect($('#multiselect-container .multiselect').length).toBe(1);
     });
-
+    
     it('Should add the dropdown menu.', function() {
         expect($('#multiselect-container .dropdown-menu').length).toBe(1);
     });
-
+    
     it('Should add an li element with checkbox and label for each option.', function() {
         expect($('#multiselect-container li').length).toBe(99);
         expect($('#multiselect-container label').length).toBe(99);
         expect($('#multiselect-container input[type="checkbox"]').length).toBe(99);
     });
-
+    
     it('Should preserve selected options.', function() {
         expect($('#multiselect-container input[type="checkbox"]:checked').length).toBe(9);
         expect($('#multiselect option:selected').length).toBe(9);
     });
-
+    
     it('Should be able to select options by value.', function() {
         $('#multiselect').multiselect('select', '10');
-
+        
         expect($('#multiselect option[value="10"]').prop('selected')).toBe(true);
         expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(true);
     });
-
+    
     it('Select method should handle "null" and "undefined" correctly.', function() {
         expect($('#multiselect option:selected').length).toBe(9);
-
+        
         $('#multiselect').multiselect('select', null);
         expect($('#multiselect option:selected').length).toBe(9);
-
+        
         $('#multiselect').multiselect('select', undefined);
         expect($('#multiselect option:selected').length).toBe(9);
     });
-
+    
     it('Should be able to deselect options by value.', function() {
         $('#multiselect').multiselect('select', '10');
         $('#multiselect').multiselect('deselect', '10');
-
+        
         expect($('#multiselect option[value="10"]').prop('selected')).toBe(false);
         expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(false);
     });
-
+    
     it('Deselect method should handle "null" and "undefined" correctly.', function() {
         expect($('#multiselect option:selected').length).toBe(9);
-
+        
         $('#multiselect').multiselect('deselect', null);
         expect($('#multiselect option:selected').length).toBe(9);
-
+        
         $('#multiselect').multiselect('deselect', undefined);
         expect($('#multiselect option:selected').length).toBe(9);
     });
-
+    
     it('Should be able to select options using an array of values.', function() {
         $('#multiselect').multiselect('select', ['10', '11']);
-
+        
         expect($('#multiselect option[value="10"]').prop('selected')).toBe(true);
         expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(true);
-
+        
         expect($('#multiselect option[value="11"]').prop('selected')).toBe(true);
         expect($('#multiselect-container input[value="11"]').prop('checked')).toBe(true);
     });
-
+    
     it('Should be able to deselect options using an array of values.', function() {
         $('#multiselect').multiselect('select', ['10', '11']);
         $('#multiselect').multiselect('deselect', ['10', '11']);
-
+        
         expect($('#multiselect option[value="10"]').prop('selected')).toBe(false);
         expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(false);
-
+        
         expect($('#multiselect option[value="11"]').prop('selected')).toBe(false);
         expect($('#multiselect-container input[value="11"]').prop('checked')).toBe(false);
     });
-
+    
     it('Should be able to disable the multiselect', function() {
         $('#multiselect').multiselect('disable');
-
+        
         expect($('#multiselect').prop('disabled')).toBe(true);
     });
-
+    
     it('Should be able to enable the multiselect', function() {
         $('#multiselect').multiselect('disable');
         $('#multiselect').multiselect('enable');
-
+        
         expect($('#multiselect').prop('disabled')).toBe(false);
     });
-
+    
     it('Should be able to select all options.', function() {
         $('#multiselect').multiselect('selectAll');
-
+        
         for (var i = 1; i < 100; i++) {
             expect($('#multiselect option[value="' + i.toString() + '"]').prop('selected')).toBe(true);
             expect($('#multiselect-container input[value="' + i.toString() + '"]').prop('checked')).toBe(true);
         }
     });
-
+    
     it('Should be able to deselect all options.', function() {
         $('#multiselect').multiselect('selectAll');
-
+        
         for (var i = 1; i < 100; i++) {
             expect($('#multiselect option[value="' + i.toString() + '"]').prop('selected')).toBe(true);
             expect($('#multiselect-container input[value="' + i.toString() + '"]').prop('checked')).toBe(true);
         }
-
+        
         $('#multiselect').multiselect('deselectAll');
-
+        
         for (var i = 1; i < 100; i++) {
             expect($('#multiselect option[value="' + i.toString() + '"]').prop('selected')).toBe(false);
             expect($('#multiselect-container input[value="' + i.toString() + '"]').prop('checked')).toBe(false);
         }
     });
-
+    
     it('Should update the checkboxes according to the selected options after using refresh.', function() {
         for (var i = 10; i < 20; i++) {
             $('#multiselect option[value="' + i + '"]').prop('selected', true);
         }
-
+        
         expect($('#multiselect option:selected').length).toBe(19);
         expect($('#multiselect-container input[type="checkbox"]:checked').length).toBe(9);
-
+        
         $('#multiselect').multiselect('refresh');
-
+        
         expect($('#multiselect-container input[type="checkbox"]:checked').length).toBe(19);
-
+        
         for (var i = 10; i < 20; i++) {
             expect($('#multiselect option[value="' + i + '"]').prop('selected')).toBe(true);
         }
     });
-
+    
     it('Should remove container, button and ul after destroy.', function() {
         $('#multiselect').multiselect('destroy');
-
+        
         // Destroy should remove container, button and ul.
         expect($('#multiselect-container.multiselect-container').length).toBe(0);
         expect($('#multiselect-container .multiselect').length).toBe(0);
         expect($('#multiselect-container .dropdown-menu').length).toBe(0);
     });
-
+    
     it('Should select an option when checkbox is changed (change event).', function() {
         $('#multiselect-container li input[value="10"]').prop('checked', true);
         $('#multiselect-container li input[value="10"]').trigger('change');
-
+        
         expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(true);
         expect($('#multiselect option[value="10"]').prop('selected')).toBe(true);
     });
-
+    
     it('Should deselect an option when checkbox is changed (change event).', function() {
         $('#multiselect-container li input[value="10"]').prop('checked', true);
         $('#multiselect-container li input[value="10"]').trigger('change');
-
+        
         // Already checked above.
-
+        
         $('#multiselect-container li input[value="10"]').prop('checked', false);
         $('#multiselect-container li input[value="10"]').trigger('change');
-
+        
         expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(false);
         expect($('#multiselect option[value="10"]').prop('selected')).toBe(false);
     });
-
+    
     it('Should select an option when checkbox is clicked.', function() {
         $('#multiselect-container li input[value="10"]').click();
-
+        
         expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(true);
         expect($('#multiselect option[value="10"]').prop('selected')).toBe(true);
     });
-
+    
     it('Should deselect an option when checkbox is clicked.', function() {
         $('#multiselect-container li input[value="10"]').click();
         $('#multiselect-container li input[value="10"]').click();
-
+        
         expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(false);
         expect($('#multiselect option[value="10"]').prop('selected')).toBe(false);
     });
@@ -216,29 +216,29 @@ describe('Bootstrap Multiselect "Core".', function() {
 describe('Bootstrap Multiselect "Single Selection"', function() {
     beforeEach(function() {
         var $select = $('<select id="multiselect"></select>');
-
+        
         for (var i = 1; i < 100; i++) {
             $select.append('<option value="' + i + '">Option ' + i + '</option>');
         }
-
+        
         $('body').append($select);
-
+        
         $select.multiselect({
             buttonContainer: '<div id="multiselect-container"></div>'
         });
     });
-
+    
     it('Should create radio buttons instead of checkboxes.', function() {
         expect($('#multiselect-container input[type="radio"]').length).toBe(99);
         expect($('#multiselect-container input[type="checkbox"]').length).toBe(0);
-
+        
         // Browser selects one option per default.
         expect($('#multiselect option:selected').length).toBe(1);
     });
-
+    
     it('Only one option at a time can be selected.', function() {
         expect($('#multiselect option:selected').length).toBe(1);
-
+        
         var i = 0;
         $('#multiselect-container input').each(function() {
             if (i === 0) {
@@ -248,18 +248,18 @@ describe('Bootstrap Multiselect "Single Selection"', function() {
             else {
                 expect($(this).prop('checked')).toBe(false);
                 $(this).click();
-
+                
                 expect($('#multiselect option:selected').length).toBe(1);
                 expect($(this).prop('checked')).toBe(true);
                 i++;
             }
         });
     });
-
+    
     it('Deselect all should work.', function() {
         expect($('#multiselect option:selected').length).toBe(1);
     });
-
+    
     afterEach(function() {
         $('#multiselect').multiselect('destroy');
         $('#multiselect').remove();
@@ -267,25 +267,25 @@ describe('Bootstrap Multiselect "Single Selection"', function() {
 });
 
 describe('Bootstrap Multiselect "Optgroups"', function() {
-
+    
     // Count the number of onChanges fired.
     var fired = 0;
-
+    
     beforeEach(function() {
         var $select = $('<select id="multiselect" multiple="multiple"></select>');
-
+        
         for (var i = 1; i < 11; i++) {
             var $optgroup = $('<optgroup label="Group ' + i + '"></optgroup>');
-
+            
             for (var j = 1; j < 11; j++) {
                 $optgroup.append('<option value="' + i + '-' + j + '">Option ' + i + '.' + j + '</option>');
             }
-
+            
             $select.append($optgroup);
         }
-
+        
         $('body').append($select);
-
+        
         $select.multiselect({
             buttonContainer: '<div id="multiselect-container"></div>',
             enableClickableOptGroups: true,
@@ -294,54 +294,54 @@ describe('Bootstrap Multiselect "Optgroups"', function() {
             }
         });
     });
-
+    
     it('Should correctly create labels for optgroups.', function() {
         expect($('#multiselect-container li.multiselect-group').length).toBe(10);
         expect($('#multiselect-container li.multiselect-group-clickable').length).toBe(10);
-
+        
         $('#multiselect-container label.multiselect-group').each(function() {
             expect($('input', $(this)).length).toBe(10);
         });
     });
-
+    
     it('Groups should be clickable.', function() {
         expect($('#multiselect option:selected').length).toBe(0);
-
+        
         var i = 0;
         $('#multiselect-container li.multiselect-group').each(function() {
             $('label', $(this)).click();
             expect($('option:selected', $('#multiselect optgroup')[i]).length).toBe(10);
             expect($('#multiselect option:selected').length).toBe(10);
-
+            
             $('label', $(this)).click();
             i++;
         });
     });
-
+    
     it('Clickable groups should fire onChange only once.', function() {
         expect($('#multiselect option:selected').length).toBe(0);
-
+        
         fired = 0;
         expect(fired).toBe(0);
-
+        
         var i = 0;
         $('#multiselect-container li.multiselect-group').each(function() {
             $('label', $(this)).click();
-
+            
             // Selected
             expect(fired).toBe(1);
             fired = 0;
-
+            
             $('label', $(this)).click();
-
+            
             // Deselected
             expect(fired).toBe(1);
             fired = 0;
-
+            
             i++;
         });
     });
-
+    
     afterEach(function() {
         $('#multiselect').multiselect('destroy');
         $('#multiselect').remove();
@@ -351,14 +351,14 @@ describe('Bootstrap Multiselect "Optgroups"', function() {
 describe('Bootstrap Multiselect "Dataprovider"', function() {
     beforeEach(function() {
         var $select = $('<select id="multiselect" multiple="multiple"></select>');
-
+        
         $('body').append($select);
-
+        
         $select.multiselect({
             buttonContainer: '<div id="multiselect-container"></div>'
         });
     });
-
+    
     var options = [
             {label: 'Option 1', value: '1', selected: true, title: 'Option 1 Title'},
             {label: 'Option 2', value: '2', title: 'Option 2 Title'},
@@ -367,47 +367,47 @@ describe('Bootstrap Multiselect "Dataprovider"', function() {
             {label: 'Option 5', value: '5', title: 'Option 5 Title'},
             {label: 'Option 6', value: '6', title: 'Option 6 Title'}
         ];
-
+    
     it("Should be able to add options.", function() {
         $('#multiselect').multiselect('dataprovider', options);
         expect($('#multiselect option').length).toBe(6);
         expect($('#multiselect-container input').length).toBe(6);
-
+        
         expect($('#multiselect option[value="1"]').length).toBe(1);
         expect($('#multiselect option[value="1"]').prop('selected')).toBe(true);
         expect($('#multiselect-container input[value="1"]').prop('checked')).toBe(true);
-
+        
         expect($('#multiselect option[value="2"]').length).toBe(1);
         expect($('#multiselect option[value="2"]').prop('selected')).toBe(false);
         expect($('#multiselect-container input[value="2"]').prop('checked')).toBe(false);
-
+        
         expect($('#multiselect option[value="3"]').length).toBe(1);
         expect($('#multiselect option[value="3"]').prop('selected')).toBe(true);
         expect($('#multiselect-container input[value="3"]').prop('checked')).toBe(true);
-
+        
         expect($('#multiselect option[value="4"]').length).toBe(1);
         expect($('#multiselect option[value="4"]').prop('selected')).toBe(false);
         expect($('#multiselect-container input[value="4"]').prop('checked')).toBe(false);
-
+        
         expect($('#multiselect option[value="5"]').length).toBe(1);
         expect($('#multiselect option[value="5"]').prop('selected')).toBe(false);
         expect($('#multiselect-container input[value="5"]').prop('checked')).toBe(false);
-
+        
         expect($('#multiselect option[value="6"]').length).toBe(1);
         expect($('#multiselect option[value="6"]').prop('selected')).toBe(false);
         expect($('#multiselect-container input[value="6"]').prop('checked')).toBe(false);
     });
-
+    
     it("Should be able to define title.", function() {
         $('#multiselect').multiselect('dataprovider', options);
-
+        
         expect($('#multiselect option[value="1"]').attr('title')).toBe('Option 1 Title');
         expect($('#multiselect option[value="2"]').attr('title')).toBe('Option 2 Title');
         expect($('#multiselect option[value="3"]').attr('title')).toBe('Option 3 Title');
         expect($('#multiselect option[value="4"]').attr('title')).toBe('Option 4 Title');
         expect($('#multiselect option[value="5"]').attr('title')).toBe('Option 5 Title');
         expect($('#multiselect option[value="6"]').attr('title')).toBe('Option 6 Title');
-
+        
         expect($('#multiselect-container input[value="1"]').closest('label').attr('title')).toBe('Option 1 Title');
         expect($('#multiselect-container input[value="2"]').closest('label').attr('title')).toBe('Option 2 Title');
         expect($('#multiselect-container input[value="3"]').closest('label').attr('title')).toBe('Option 3 Title');
@@ -415,7 +415,7 @@ describe('Bootstrap Multiselect "Dataprovider"', function() {
         expect($('#multiselect-container input[value="5"]').closest('label').attr('title')).toBe('Option 5 Title');
         expect($('#multiselect-container input[value="6"]').closest('label').attr('title')).toBe('Option 6 Title');
     });
-
+    
     var optgroups = [
         {
             label: 'Group 1', children: [
@@ -432,18 +432,18 @@ describe('Bootstrap Multiselect "Dataprovider"', function() {
             ]
         }
     ];
-
+        
     it('Should be able to handle optgroups.', function() {
         $('#multiselect').multiselect('dataprovider', optgroups);
-
+        
         expect($('#multiselect optgroup').length).toBe(2);
         expect($('#multiselect option').length).toBe(6);
         expect($('#multiselect-container input').length).toBe(6);
-
+        
         expect($('#multiselect optgroup[label="Group 1"] option').length).toBe(3);
         expect($('#multiselect optgroup[label="Group 2"] option').length).toBe(3);
     });
-
+    
     afterEach(function() {
         $('#multiselect').multiselect('destroy');
         $('#multiselect').remove();
@@ -451,21 +451,21 @@ describe('Bootstrap Multiselect "Dataprovider"', function() {
 });
 
 describe('Bootstrap Multiselect "Select All".', function() {
-
+    
     var onSelectAllTriggered = false;
     var onDeselectAllTriggered = false;
-
+    
     var fired = 0;
-
+    
     beforeEach(function() {
         var $select = $('<select id="multiselect" multiple="multiple"></select>');
-
+        
         for (var i = 1; i < 100; i++) {
             $select.append('<option value="' + i + '">1</option>');
         }
-
+        
         $('body').append($select);
-
+        
         $select.multiselect({
             buttonContainer: '<div id="multiselect-container"></div>',
             includeSelectAllOption: true,
@@ -481,364 +481,195 @@ describe('Bootstrap Multiselect "Select All".', function() {
             }
         });
     });
-
+    
     it('Should not add an additional option to the select.', function() {
         expect($('#multiselect option[value="multiselect-all"]').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').length).toBe(1);
         expect($('#multiselect option').length).toBe(99);
         expect($('#multiselect-container input').length).toBe(100);
     });
-
+    
     it('Should update the select all when all options are selected by the "select" method.', function() {
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
-
+        
         for (var i = 1; i < 100; i++) {
             $('#multiselect').multiselect('select', i.toString());
             expect($('#multiselect option[value="' + i.toString() + '"]').prop('selected')).toBe(true);
         }
-
+        
         expect($('#multiselect option:selected').length).toBe(99);
         expect($('#multiselect-container input').length).toBe(100);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(true);
     });
-
+    
     it('Should update the select all when all options are deselected by the "deselect" method (first all options are selected as before).', function() {
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
-
+        
         for (var i = 1; i < 100; i++) {
             $('#multiselect').multiselect('select', i.toString());
         }
-
+        
         expect($('#multiselect option:selected').length).toBe(99);
         expect($('#multiselect-container input:checked').length).toBe(100);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(true);
-
+        
         for (var i = 1; i < 100; i++) {
             $('#multiselect').multiselect('deselect', i.toString());
         }
-
+        
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
     });
-
+    
     it('Should update the select all option when all options are selected by the change event.', function() {
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
-
+        
         // Change all checkboxes except the select all one.
         $('#multiselect-container input[value!="multiselect-all"]').prop('checked', true);
         $('#multiselect-container input[value!="multiselect-all"]').trigger('change');
-
+        
         expect($('#multiselect option:selected[value!="multiselect-all"]').length).toBe(99);
-
+        
         // 100 options seleted including the select all.
         expect($('#multiselect option:selected').length).toBe(99);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(true);
     });
-
+    
     it('Should update the select all option when all options are deselected by the change event.', function() {
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
-
+        
         $('#multiselect-container input[value!="multiselect-all"]').prop('checked', true);
         $('#multiselect-container input[value!="multiselect-all"]').trigger('change');
-
+        
         expect($('#multiselect option:selected[value!="multiselect-all"]').length).toBe(99);
-
+        
         expect($('#multiselect option:selected').length).toBe(99);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(true);
-
+        
         // Change all checkboxes except the select all one.
         $('#multiselect-container input[value!="multiselect-all"]').prop('checked', false);
         $('#multiselect-container input[value!="multiselect-all"]').trigger('change');
-
+        
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
     });
-
+    
     it('Should update the select all option when all options are selected by the click event.', function() {
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
-
+        
         $('#multiselect-container input[value!="multiselect-all"]').click();
-
+        
         expect($('#multiselect option:selected').length).toBe(99);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(true);
     });
-
+    
     it('Should update the select all option when all options are deselected by the click event.', function() {
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
-
+        
         $('#multiselect-container input[value!="multiselect-all"]').click();
-
+        
         expect($('#multiselect option:selected').length).toBe(99);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(true);
-
+        
         $('#multiselect-container input[value!="multiselect-all"]').click();
-
+        
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
     });
-
+    
     it('Should trigger onSelectAll based on the change event.', function() {
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
-
+        
         // Change all checkboxes except the select all one.
         $('#multiselect-container input[value!="multiselect-all"]').prop('checked', true);
         $('#multiselect-container input[value!="multiselect-all"]').trigger('change');
-
+        
         expect($('#multiselect option:selected[value!="multiselect-all"]').length).toBe(99);
-
+        
         // 100 options seleted including the select all.
         expect($('#multiselect option:selected').length).toBe(99);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(true);
-
+        
         expect(onSelectAllTriggered).toBe(true);
     });
-
+    
     it('Should trigger onSelectAll based on the click event.', function() {
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
-
+        
         $('#multiselect-container input[value!="multiselect-all"]').click();
-
+        
         expect($('#multiselect option:selected').length).toBe(99);
         expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(true);
-
+        
         expect(onSelectAllTriggered).toBe(true);
     });
-
+    
     it('Should trigger onSelectAll on function call.', function() {
         $('#multiselect').multiselect('selectAll', true, true);
         expect(onSelectAllTriggered).toBe(true);
     });
-
+    
     it('Should not trigger onChange for select all option.', function() {
         fired = 0;
         expect(fired).toBe(0);
         $('#multiselect-container input[value="multiselect-all"]').click();
         expect(fired).toBe(0);
     });
-
+    
     afterEach(function() {
         $('#multiselect').multiselect('destroy');
         $('#multiselect').remove();
     });
 });
 
-describe('Bootstrap Multiselect "setSelection".', function () {
-
-    var onChangeSelected = [];
-    var onChangeDeselected = [];
-    var onChangeFired = 0;
-    var $select;
-
-    beforeEach(function () {
-        $select = $('<select id="multiselect" multiple="multiple"></select>');
-
-        for (var i = 1; i < 100; i++) {
-            $select.append('<option value="' + i + '">1</option>');
-        }
-
-        $('body').append($select);
-
-        $select.multiselect({
-            onChange: function (option, checked) {
-                ++onChangeFired;
-
-                (checked ? onChangeSelected : onChangeDeselected).push($(option).val());
-            }
-        });
-
-        onChangeFired = 0;
-        onChangeSelected = [];
-        onChangeDeselected = [];
-    });
-
-    var VALS_A = [3, 25, 19, 76];
-    var VALS_B = [11, 23, 92];
-    var VALS_C = [37, 69, 40];
-    var VALS_AB = VALS_A.concat(VALS_B);
-    var VALS_BC = VALS_B.concat(VALS_C);
-    var VALS_ABC = VALS_A.concat(VALS_B).concat(VALS_C);
-
-    function sortInt(x, y) { return (x - y); }
-
-    VALS_A = VALS_A.sort(sortInt).map(function (n) { return n.toString(); });
-    VALS_B = VALS_B.sort(sortInt).map(function (n) { return n.toString(); });
-    VALS_C = VALS_C.sort(sortInt).map(function (n) { return n.toString(); });
-    VALS_AB = VALS_AB.sort(sortInt).map(function (n) { return n.toString(); });
-    VALS_BC = VALS_BC.sort(sortInt).map(function (n) { return n.toString(); });
-    VALS_ABC = VALS_ABC.sort(sortInt).map(function (n) { return n.toString(); });
-
-    it('Should be able to set selected values', function () {
-        var values = VALS_AB;
-
-        expect($('option:selected', $select).length).toBe(0);
-        expect($select.val()).toBeNull();
-
-        $select.multiselect("setSelected", values);
-        for (var i = 0; i < values.length; ++i) {
-            expect($('option[value="' + values[i].toString() + '"]').prop('selected')).toBe(true);
-        }
-        expect($select.val()).toEqual(values);
-    });
-
-    it('Should be able to deselect values', function () {
-        var values = VALS_AB;
-        var i;
-
-        // Verify initial state
-        expect($('option:selected', $select).length).toBe(0);
-        expect($select.val()).toBeNull();
-
-        // Select some values and test the state
-        $select.multiselect("select", values);
-        expect($select.val()).toEqual(values);
-        for (i = 0; i < VALS_C.length; ++i) {
-            expect($('option[value="' + VALS_C[i].toString() + '"]').prop('selected')).toBe(false);
-        }
-        for (i = 0; i < values.length; ++i) {
-            expect($('option[value="' + values[i].toString() + '"]').prop('selected')).toBe(true);
-        }
-
-        // Set the selection to a different set of values
-        $select.multiselect("setSelected", VALS_C);
-        expect($select.val()).toEqual(VALS_C);
-        for (i = 0; i < VALS_C.length; ++i) {
-            expect($('option[value="' + VALS_C[i].toString() + '"]').prop('selected')).toBe(true);
-        }
-        for (i = 0; i < values.lengths; ++i) {
-            expect($('option[value="' + values[i].toString() + '"]').prop('selected')).toBe(false);
-        }
-    });
-
-    it('Should be able to receive onChange notifications for only the values that changed', function () {
-        var initVals = VALS_AB;
-        var setVals = VALS_BC;
-        var i;
-
-        expect(onChangeFired).toBe(0);
-        expect(onChangeSelected.length).toBe(0);
-        expect(onChangeDeselected.length).toBe(0);
-
-        $select.multiselect("setSelected", initVals, true);
-        expect(onChangeSelected).toEqual(initVals);
-        expect($select.val()).toEqual(initVals);
-        expect(onChangeSelected).toEqual($select.val());
-        expect(onChangeDeselected.length).toBe(0);
-        expect(onChangeFired).toBe(initVals.length);
-        for (i = 0; i < VALS_A.length; ++i) {
-            expect($('option[value="' + VALS_A[i].toString() + '"]').prop('selected')).toBe(true);
-        }
-        for (i = 0; i < VALS_B.length; ++i) {
-            expect($('option[value="' + VALS_B[i].toString() + '"]').prop('selected')).toBe(true);
-        }
-        for (i = 0; i < VALS_C.length; ++i) {
-            expect($('option[value="' + VALS_C[i].toString() + '"]').prop('selected')).toBe(false);
-        }
-
-        onChangeSelected = [];
-        onChangeFired = 0;
-        $select.multiselect("setSelected", setVals, true);  // Unselect "A", Select "C", Leave "B" Selected
-        expect($select.val()).toEqual(setVals);
-        expect(onChangeSelected).toEqual(VALS_C);
-        expect(onChangeDeselected).toEqual(VALS_A);
-        expect(onChangeFired).toBe(VALS_C.length + VALS_A.length);
-        for (i = 0; i < VALS_A.length; ++i) {
-            expect($('option[value="' + VALS_A[i].toString() + '"]').prop('selected')).toBe(false);
-        }
-        for (i = 0; i < VALS_B.length; ++i) {
-            expect($('option[value="' + VALS_B[i].toString() + '"]').prop('selected')).toBe(true);
-        }
-        for (i = 0; i < VALS_C.length; ++i) {
-            expect($('option[value="' + VALS_C[i].toString() + '"]').prop('selected')).toBe(true);
-        }
-    });
-
-    it('Should not fire onChange notifications if they\'re not requested', function () {
-        expect(onChangeFired).toBe(0);
-        expect(onChangeSelected.length).toBe(0);
-        expect(onChangeDeselected.length).toBe(0);
-
-        // Set a new selection
-        $select.multiselect('setSelected', VALS_AB, false);
-
-        // Verify the selection changed but events did not fire
-        expect($select.val()).toEqual(VALS_AB);
-        expect(onChangeFired).toBe(0);
-        expect(onChangeSelected.length).toBe(0);
-        expect(onChangeDeselected.length).toBe(0);
-
-        // Set a new selection
-        $select.multiselect('setSelected', VALS_BC, false);
-
-        // Verify the selection changed but events did not fire
-        expect($select.val()).toEqual(VALS_BC);
-        expect(onChangeFired).toBe(0);
-        expect(onChangeSelected.length).toBe(0);
-        expect(onChangeDeselected.length).toBe(0);
-
-        // Set a new selection
-        $select.multiselect('setSelected', VALS_ABC, false);
-
-        // Verify the selection changed but events did not fire
-        expect($select.val()).toEqual(VALS_ABC);
-        expect(onChangeFired).toBe(0);
-        expect(onChangeSelected.length).toBe(0);
-        expect(onChangeDeselected.length).toBe(0);
-    });
-
-    afterEach(function () {
-        $select.multiselect('destroy');
-        $select.remove();
-    });
-});
-
 describe('Bootstrap Multiselect Specific Issues', function() {
-
+    
     it('#393', function() {
         var $select = $('<select id="multiselect" multiple="multiple"></select>');
-
+        
         for (var i = 1; i < 100; i++) {
             $select.append('<option value="' + i + '">1</option>');
         }
-
+        
         $('body').append($select);
-
+        
         $select.multiselect({
             buttonContainer: '<div id="multiselect-container"></div>',
             includeSelectAllOption: true,
             selectAllValue: 0
         });
-
+        
         expect($('#multiselect-container input[value="0"]').length).toBe(1);
         expect($('#multiselect-container input[value="0"]').prop('checked')).toBe(false);
-
+        
         $('#multiselect').multiselect('selectAll');
-
+        
         expect($('#multiselect option:selected').length).toBe(99);
         expect($('#multiselect-container input[value="0"]').prop('checked')).toBe(true);
-
+        
         $('#multiselect').multiselect('deselectAll');
-
+        
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="0"]').prop('checked')).toBe(false);
-
+        
         $('#multiselect-container input[value="0"]').click();
-
+        
         expect($('#multiselect option:selected').length).toBe(99);
         expect($('#multiselect-container input[value="0"]').prop('checked')).toBe(true);
-
+        
         $('#multiselect-container input[value="0"]').click();
-
+        
         expect($('#multiselect option:selected').length).toBe(0);
         expect($('#multiselect-container input[value="0"]').prop('checked')).toBe(false);
-
+        
         $('#multiselect').multiselect('destroy');
         $('#multiselect').remove();
     });

From e687bf75faeda7cd1b8be77398280e652665b17d Mon Sep 17 00:00:00 2001
From: "Darrin W. Cullop" <v-dacul@microsoft.com>
Date: Mon, 18 Apr 2016 08:02:52 -0700
Subject: [PATCH 3/3] Added "setSelection" method to code, tests, and
 documentation.

The "setSelection" method allows an explicit list of options to be set.
Deselected options in the provided list will be selected and selection
options that are not in the provided list be deselected.  Internally, it
delegates to the "select" and "deselect" methods and gives the caller
the same option for firing the onChange notification.

The testing suite has been updated to validate the new feature.  The
tests make sure that the selection changes as it is supposed to, the
onChange notification fires appropriately, and doesn't fire when
requested not to do so.

Finally, the documentation page has been updated to show how to use this
feature with working and tested examples that are based off of the other
ones already provided.
---
 dist/js/bootstrap-multiselect.js    |  52 +++++++++
 index.html                          | 154 +++++++++++++++++++++++++
 tests/spec/bootstrap-multiselect.js | 168 ++++++++++++++++++++++++++++
 3 files changed, 374 insertions(+)

diff --git a/dist/js/bootstrap-multiselect.js b/dist/js/bootstrap-multiselect.js
index a7c71eab..a81a8f41 100644
--- a/dist/js/bootstrap-multiselect.js
+++ b/dist/js/bootstrap-multiselect.js
@@ -1363,6 +1363,58 @@
             }
         },
 
+        /**
+         * Set the current selection
+         *
+         * Helper function to set which options are currently selected by invoking
+         * 'select' for all unselected values that appear in the given list and
+         * invoking 'deselect' for all selected values that do NOT appear in the
+         * given list
+         *
+         * @param {Array} selection
+         * @param {Boolean} triggerOnChange
+         */
+        setSelected: function (selection, triggerOnChange) {
+            if (!$.isArray(selection)) {
+                selection = [selection];
+            }
+
+            // Get all of the enabled options
+            var opts = $("option:enabled", this.$select);
+            var selectedOpts = opts.filter(":selected");
+            var notSelectedOpts = opts.not(":selected");
+            var values;
+            var val;
+
+            // Find all the not-selected options
+            values = notSelectedOpts.map(function () {
+                // If their value is in the array, it should be selected so
+                // return that value (otherwise, return null to omit it from the result)
+                val = $(this).val();
+                return ($.inArray(val, selection) > -1) ? val : null;
+            }).get();
+
+            if ( values.length )
+            {
+                // Select all that need to be selected
+                this.select(values, triggerOnChange);
+            }
+
+            // Find all the selected options
+            values = selectedOpts.map(function () {
+                // If their value is NOT in the array, it should be deselected so
+                // return that value (otherwise, return null to omit it from the result)
+                val = $(this).val();
+                return ($.inArray(val, selection) == -1) ? val : null;
+            }).get();
+
+            if ( values.length )
+            {
+                // Deselect all that should not be selected
+                this.deselect(values, triggerOnChange);
+            }
+        },
+
         /**
          * Rebuild the plugin.
          * 
diff --git a/index.html b/index.html
index 2574868b..2e5f03cf 100644
--- a/index.html
+++ b/index.html
@@ -3485,6 +3485,160 @@ <h2 id="methods">Methods</h2>
         });
     });
 &lt;/script&gt;
+</pre>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <code>.multiselect('setSelected', selection)</code>
+                                </td>
+                                <td>
+                                    <p>
+                                        Explicitly sets which options are selected (also works with an array of values).  Any currently selected options
+                                        that do not appear in the given array will be deselected.  Any deselected options that do appear in the given array
+                                        will be selected.
+                                    </p>
+
+                                    <div class="example">
+                                        <div class="btn-group">
+                                            <script type="text/javascript">
+                                                $(document).ready(function() {
+                                                    $('#example-setSelected').multiselect();
+
+                                                    $('#example-setSelected-button').on('click', function() {
+                                                        $('#example-setSelected').multiselect('setSelected', ['1', '2', '4']);
+
+                                                        alert('Selected 1, 2 and 4.  Deselected 3, 5, and 6.');
+                                                    });
+                                                });
+                                            </script>
+                                            <div class="btn-group">
+                                                <select id="example-setSelected" multiple="multiple">
+                                                    <option value="1">Option 1</option>
+                                                    <option value="2">Option 2</option>
+                                                    <option value="3" selected="selected">Option 3</option>
+                                                    <option value="4">Option 4</option>
+                                                    <option value="5" selected="selected">Option 5</option>
+                                                    <option value="6" selected="selected">Option 6</option>
+                                                </select>
+                                                <button id="example-setSelected-button" class="btn btn-default">Set the Selection...</button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="highlight">
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+    $(document).ready(function() {
+        $('#example-setSelected').multiselect();
+
+        $('#example-setSelected-button').on('click', function() {
+            $('#example-setSelected').multiselect('setSelected', ['1', '2', '4']);
+
+            alert('Selected 1, 2 and 4.  Deselected 3, 5, and 6.');
+        });
+    });
+&lt;/script&gt;
+</pre>
+                                    </div>
+
+                                    <p>
+                                        The method provides an additional parameter: <code>.multiselect('setSelected', selection, triggerOnChange)</code>. If the third parameter is set to true, the method will manually trigger the <code>onChange</code> option.
+                                    </p>
+
+                                    <div class="example">
+                                        <div class="btn-group">
+                                            <script type="text/javascript">
+                                                $(document).ready(function() {
+                                                    $('#example-setSelected-onChange').multiselect({
+                                                        onChange: function(option, checked, select) {
+                                                            alert('onChange triggered: ' + $(option).val() + ' was ' + (checked ? '' : 'de') + 'selected.');
+                                                        }
+                                                    });
+
+                                                    $('#example-setSelected-onChange-button').on('click', function() {
+                                                        $('#example-setSelected-onChange').multiselect('setSelected', '1', true);
+                                                    });
+                                                });
+                                            </script>
+                                            <div class="btn-group">
+                                                <select id="example-setSelected-onChange" multiple="multiple">
+                                                    <option value="1">Option 1</option>
+                                                    <option value="2" selected="selected">Option 2</option>
+                                                    <option value="3">Option 3</option>
+                                                    <option value="4">Option 4</option>
+                                                    <option value="5">Option 5</option>
+                                                    <option value="6">Option 6</option>
+                                                </select>
+                                                <button id="example-setSelected-onChange-button" class="btn btn-default">Set Selected</button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="highlight">
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+    $(document).ready(function() {
+        $('#example-setSelected-onChange').multiselect({
+            onChange: function(option, checked, select) {
+                alert('onChange triggered: ' + $(option).val() + ' was ' + (checked ? '' : 'de') + 'selected.');
+            }
+        });
+
+        $('#example-setSelected-onChange-button').on('click', function() {
+            $('#example-setSelected-onChange').multiselect('setSelected', '1', true);
+        });
+    });
+&lt;/script&gt;
+</pre>
+                                    </div>
+
+                                    <p>
+                                        The above parameter also works when multiple options change (selected or deselected). Note that <code>onChange</code> is called for each selected and deselected option individually.
+                                    </p>
+
+                                    <div class="example">
+                                        <div class="btn-group">
+                                            <script type="text/javascript">
+                                                $(document).ready(function() {
+                                                    $('#example-setSelected-onChange-array').multiselect({
+                                                        onChange: function(option, checked, select) {
+                                                            alert('onChange triggered: ' + $(option).val() + ' was ' + (checked ? '' : 'de') + 'selected.');
+                                                        }
+                                                    });
+
+                                                    $('#example-setSelected-onChange-array-button').on('click', function() {
+                                                        $('#example-setSelected-onChange-array').multiselect('setSelected', ['2', '4'], true);
+                                                    });
+                                                });
+                                            </script>
+                                            <div class="btn-group">
+                                                <select id="example-setSelected-onChange-array" multiple="multiple">
+                                                    <option value="1" selected="selected">Option 1</option>
+                                                    <option value="2">Option 2</option>
+                                                    <option value="3" selected="selected">Option 3</option>
+                                                    <option value="4">Option 4</option>
+                                                    <option value="5">Option 5</option>
+                                                    <option value="6">Option 6</option>
+                                                </select>
+                                                <button id="example-setSelected-onChange-array-button" class="btn btn-default">Change Multiple Selections</button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="highlight">
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+    $(document).ready(function() {
+        $('#example-setSelected-onChange-array').multiselect({
+            onChange: function(option, checked, select) {
+                alert('onChange triggered: ' + $(option).val() + ' was ' + (checked ? '' : 'de') + 'selected.');
+            }
+        });
+
+        $('#example-setSelected-onChange-array-button').on('click', function() {
+            $('#example-setSelected-onChange-array').multiselect('setSelected', ['2','4'], true);
+        });
+    });
+&lt;/script&gt;
 </pre>
                                     </div>
                                 </td>
diff --git a/tests/spec/bootstrap-multiselect.js b/tests/spec/bootstrap-multiselect.js
index 2e9f1d5d..62e00354 100644
--- a/tests/spec/bootstrap-multiselect.js
+++ b/tests/spec/bootstrap-multiselect.js
@@ -630,6 +630,174 @@ describe('Bootstrap Multiselect "Select All".', function() {
     });
 });
 
+describe('Bootstrap Multiselect "setSelection".', function () {
+
+    var onChangeSelected = [];
+    var onChangeDeselected = [];
+    var onChangeFired = 0;
+    var $select;
+
+    beforeEach(function () {
+        $select = $('<select id="multiselect" multiple="multiple"></select>');
+
+        for (var i = 1; i < 100; i++) {
+            $select.append('<option value="' + i + '">1</option>');
+        }
+
+        $('body').append($select);
+
+        $select.multiselect({
+            onChange: function (option, checked) {
+                ++onChangeFired;
+
+                (checked ? onChangeSelected : onChangeDeselected).push($(option).val());
+            }
+        });
+
+        onChangeFired = 0;
+        onChangeSelected = [];
+        onChangeDeselected = [];
+    });
+
+    var VALS_A = [3, 25, 19, 76];
+    var VALS_B = [11, 23, 92];
+    var VALS_C = [37, 69, 40];
+    var VALS_AB = VALS_A.concat(VALS_B);
+    var VALS_BC = VALS_B.concat(VALS_C);
+    var VALS_ABC = VALS_A.concat(VALS_B).concat(VALS_C);
+
+    function sortInt(x, y) { return (x - y); }
+
+    VALS_A = VALS_A.sort(sortInt).map(function (n) { return n.toString(); });
+    VALS_B = VALS_B.sort(sortInt).map(function (n) { return n.toString(); });
+    VALS_C = VALS_C.sort(sortInt).map(function (n) { return n.toString(); });
+    VALS_AB = VALS_AB.sort(sortInt).map(function (n) { return n.toString(); });
+    VALS_BC = VALS_BC.sort(sortInt).map(function (n) { return n.toString(); });
+    VALS_ABC = VALS_ABC.sort(sortInt).map(function (n) { return n.toString(); });
+
+    it('Should be able to set selected values', function () {
+        var values = VALS_AB;
+
+        expect($('option:selected', $select).length).toBe(0);
+        expect($select.val()).toBeNull();
+
+        $select.multiselect("setSelected", values);
+        for (var i = 0; i < values.length; ++i) {
+            expect($('option[value="' + values[i].toString() + '"]').prop('selected')).toBe(true);
+        }
+        expect($select.val()).toEqual(values);
+    });
+
+    it('Should be able to deselect values', function () {
+        var values = VALS_AB;
+        var i;
+
+        // Verify initial state
+        expect($('option:selected', $select).length).toBe(0);
+        expect($select.val()).toBeNull();
+
+        // Select some values and test the state
+        $select.multiselect("select", values);
+        expect($select.val()).toEqual(values);
+        for (i = 0; i < VALS_C.length; ++i) {
+            expect($('option[value="' + VALS_C[i].toString() + '"]').prop('selected')).toBe(false);
+        }
+        for (i = 0; i < values.length; ++i) {
+            expect($('option[value="' + values[i].toString() + '"]').prop('selected')).toBe(true);
+        }
+
+        // Set the selection to a different set of values
+        $select.multiselect("setSelected", VALS_C);
+        expect($select.val()).toEqual(VALS_C);
+        for (i = 0; i < VALS_C.length; ++i) {
+            expect($('option[value="' + VALS_C[i].toString() + '"]').prop('selected')).toBe(true);
+        }
+        for (i = 0; i < values.lengths; ++i) {
+            expect($('option[value="' + values[i].toString() + '"]').prop('selected')).toBe(false);
+        }
+    });
+
+    it('Should be able to receive onChange notifications for only the values that changed', function () {
+        var initVals = VALS_AB;
+        var setVals = VALS_BC;
+        var i;
+
+        expect(onChangeFired).toBe(0);
+        expect(onChangeSelected.length).toBe(0);
+        expect(onChangeDeselected.length).toBe(0);
+
+        $select.multiselect("setSelected", initVals, true);
+        expect(onChangeSelected).toEqual(initVals);
+        expect($select.val()).toEqual(initVals);
+        expect(onChangeSelected).toEqual($select.val());
+        expect(onChangeDeselected.length).toBe(0);
+        expect(onChangeFired).toBe(initVals.length);
+        for (i = 0; i < VALS_A.length; ++i) {
+            expect($('option[value="' + VALS_A[i].toString() + '"]').prop('selected')).toBe(true);
+        }
+        for (i = 0; i < VALS_B.length; ++i) {
+            expect($('option[value="' + VALS_B[i].toString() + '"]').prop('selected')).toBe(true);
+        }
+        for (i = 0; i < VALS_C.length; ++i) {
+            expect($('option[value="' + VALS_C[i].toString() + '"]').prop('selected')).toBe(false);
+        }
+
+        onChangeSelected = [];
+        onChangeFired = 0;
+        $select.multiselect("setSelected", setVals, true);  // Unselect "A", Select "C", Leave "B" Selected
+        expect($select.val()).toEqual(setVals);
+        expect(onChangeSelected).toEqual(VALS_C);
+        expect(onChangeDeselected).toEqual(VALS_A);
+        expect(onChangeFired).toBe(VALS_C.length + VALS_A.length);
+        for (i = 0; i < VALS_A.length; ++i) {
+            expect($('option[value="' + VALS_A[i].toString() + '"]').prop('selected')).toBe(false);
+        }
+        for (i = 0; i < VALS_B.length; ++i) {
+            expect($('option[value="' + VALS_B[i].toString() + '"]').prop('selected')).toBe(true);
+        }
+        for (i = 0; i < VALS_C.length; ++i) {
+            expect($('option[value="' + VALS_C[i].toString() + '"]').prop('selected')).toBe(true);
+        }
+    });
+
+    it('Should not fire onChange notifications if they\'re not requested', function () {
+        expect(onChangeFired).toBe(0);
+        expect(onChangeSelected.length).toBe(0);
+        expect(onChangeDeselected.length).toBe(0);
+
+        // Set a new selection
+        $select.multiselect('setSelected', VALS_AB, false);
+
+        // Verify the selection changed but events did not fire
+        expect($select.val()).toEqual(VALS_AB);
+        expect(onChangeFired).toBe(0);
+        expect(onChangeSelected.length).toBe(0);
+        expect(onChangeDeselected.length).toBe(0);
+
+        // Set a new selection
+        $select.multiselect('setSelected', VALS_BC, false);
+
+        // Verify the selection changed but events did not fire
+        expect($select.val()).toEqual(VALS_BC);
+        expect(onChangeFired).toBe(0);
+        expect(onChangeSelected.length).toBe(0);
+        expect(onChangeDeselected.length).toBe(0);
+
+        // Set a new selection
+        $select.multiselect('setSelected', VALS_ABC, false);
+
+        // Verify the selection changed but events did not fire
+        expect($select.val()).toEqual(VALS_ABC);
+        expect(onChangeFired).toBe(0);
+        expect(onChangeSelected.length).toBe(0);
+        expect(onChangeDeselected.length).toBe(0);
+    });
+
+    afterEach(function () {
+        $select.multiselect('destroy');
+        $select.remove();
+    });
+});
 describe('Bootstrap Multiselect Specific Issues', function() {
     
     it('#393', function() {