onSelectAll option for #415.

dist/js/bootstrap-multiselect.js

@@ -89,7 +89,7 @@
 
     function forEach(array, callback) {
         for (var index = 0; index < array.length; ++index) {
-            callback(array[index]);
+            callback(array[index], index);
         }
     }
 
@@ -240,6 +240,12 @@
              */
             onDropdownHidden: function(event) {
                 
+            },
+            /**
+             * Triggered on select all.
+             */
+            onSelectAll: function() {
+                
             },
             buttonClass: 'btn btn-default',
             inheritClass: false,
@@ -1004,8 +1010,9 @@
          * If justVisible is true or not specified, only visible options are selected.
          *
          * @param {Boolean} justVisible
+         * @param {Boolean} triggerOnSelectAll
          */
-        selectAll: function (justVisible) {
+        selectAll: function (justVisible, triggerOnSelectAll) {
             var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
             var allCheckboxes = $("li input[type='checkbox']:enabled", this.$ul);
             var visibleCheckboxes = allCheckboxes.filter(":visible");
@@ -1033,6 +1040,10 @@
                     return $.inArray($(this).val(), values) !== -1;
                 }).prop('selected', true);
             }
+            
+            if (triggerOnSelectAll) {
+                this.options.onSelectAll();
+            }
         },
 
         /**
@@ -1102,42 +1113,41 @@
          * The provided data will be used to build the dropdown.
          */
         dataprovider: function(dataprovider) {
-            var optionDOM = "";
+            
             var groupCounter = 0;
-            var tags = []; // create empty array
-
+            var $select = this.$select.empty();
+            
             $.each(dataprovider, function (index, option) {
-                var tag;
+                var $tag;
+                
                 if ($.isArray(option.children)) { // create optiongroup tag
                     groupCounter++;
-                    tag = $('<optgroup/>').attr({
+                    
+                    $tag = $('<optgroup/>').attr({
                         label: option.label || 'Group ' + groupCounter
                     });
+                    
                     forEach(option.children, function(subOption) { // add children option tags
-                        tag.append($('<option/>').attr({
+                        $tag.append($('<option/>').attr({
                             value: subOption.value,
                             label: subOption.label || subOption.value,
                             title: subOption.title,
                             selected: !!subOption.selected
                         }));
                     });
-
-                    optionDOM += '</optgroup>';
                 }
-                else { // create option tag
-                    tag = $('<option/>').attr({
+                else {
+                    $tag = $('<option/>').attr({
                         value: option.value,
                         label: option.label || option.value,
                         title: option.title,
                         selected: !!option.selected
                     });
-                    
-                    tags.push(tag);
                 }
-
+                
+                $select.append($tag);
             });
             
-            this.$select.empty().append(tags);
             this.rebuild();
         },
 
@@ -1201,6 +1211,7 @@
                 if (checkedBoxesLength > 0 && checkedBoxesLength === allBoxesLength) {
                     selectAllInput.prop("checked", true);
                     selectAllLi.addClass(this.options.selectedClass);
+                    this.options.onSelectAll();
                 }
                 else {
                     selectAllInput.prop("checked", false);

index.html

@@ -1595,6 +1595,49 @@
         });
     });
 </script>
+</pre>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <code>onSelectAll</code>
+                                </td>
+                                <td>
+                                    <p>
+                                        This function is triggered when the select all option is used to select all options. Note that this can also be triggered manually using the <code>.multiselect('selectAll')</code> method.
+                                    </p>
+
+                                    <div class="example">
+                                        <script type="text/javascript">
+                                            $(document).ready(function() {
+                                                $('#example-onSelectAll').multiselect({
+                                                    includeSelectAllOption: true,
+                                                    onSelectAll: function() {
+                                                        alert('onSelectAll triggered.');
+                                                    }
+                                                });
+                                            });
+                                        </script>
+                                        <select id="example-onSelectAll" multiple="multiple">
+                                            <option value="1">Option 1</option>
+                                            <option value="2">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>
+                                    </div>
+                                    <div class="highlight">
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+    $('#example-onSelectAll').multiselect({
+        includeSelectAllOption: true,
+        onSelectAll: function() {
+            alert('onSelectAll triggered.');
+        }
+    });
+&lt;/script&gt;
 </pre>
                                     </div>
                                 </td>

tests/spec/bootstrap-multiselect.js

@@ -407,6 +407,10 @@ describe('Bootstrap Multiselect "Dataprovider"', function() {
 });
 
 describe('Bootstrap Multiselect "Select All".', function() {
+    
+    var onSelectAllTriggered = false;
+    var onDeselectAllTriggered = false;
+    
     beforeEach(function() {
         var $select = $('<select id="multiselect" multiple="multiple"></select>');
         
@@ -419,7 +423,13 @@ describe('Bootstrap Multiselect "Select All".', function() {
         $select.multiselect({
             buttonContainer: '<div id="multiselect-container"></div>',
             includeSelectAllOption: true,
-            selectAllValue: 'multiselect-all'
+            selectAllValue: 'multiselect-all',
+            onSelectAll: function() {
+                onSelectAllTriggered = true;
+            },
+            onDeselectAll: function() {
+                onDeselectAllTriggered = true;
+            }
         });
     });
     
@@ -524,6 +534,40 @@ describe('Bootstrap Multiselect "Select All".', function() {
         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);
+    });
+    
     afterEach(function() {
         $('#multiselect').multiselect('destroy');
         $('#multiselect').remove();