Example for #553 and #548.

dist/js/bootstrap-multiselect.js

@@ -937,46 +937,46 @@
          */
         refresh: function () {
             var inputs = $.map($('li input', this.$ul), $);
-            var selectedClass = this.options.selectedClass;
-            $('option', this.$select).each(function (index, element) {
+            
+            $('option', this.$select).each($.proxy(function (index, element) {
                 var $elem = $(element);
                 var value = $elem.val();
                 var $input;
-                for (var i = inputs.length; 0 < i--; /**/) {
+                for (var i = inputs.length; 0 < i--; /**/) {
                     if (value !== ($input = inputs[i]).val())
                         continue; // wrong li
 
-                    if ($elem.is(':selected')) {
+                    if ($elem.is(':selected')) {
                         $input.prop('checked', true);
 
-                        if (selectedClass) {
+                        if (this.options.selectedClass) {
                             $input.closest('li')
-                                .addClass(selectedClass);
-                        }
+                                .addClass(this.options.selectedClass);
+                        }
                     }
-                    else {
+                    else {
                         $input.prop('checked', false);
 
-                        if (selectedClass) {
+                        if (this.options.selectedClass) {
                             $input.closest('li')
-                                .removeClass(selectedClass);
-                        }
+                                .removeClass(this.options.selectedClass);
+                        }
                     }
 
-                    if ($elem.is(":disabled")) {
+                    if ($elem.is(":disabled")) {
                         $input.attr('disabled', 'disabled')
                             .prop('disabled', true)
                             .closest('li')
-                            .addClass('disabled');
+                            .addClass('disabled');
                     }
-                    else {
+                    else {
                         $input.prop('disabled', false)
                             .closest('li')
-                            .removeClass('disabled');
-                    }
-                    break; // assumes unique values
+                            .removeClass('disabled');
+                    }
+                    break; // assumes unique values
                 }
-            });
+            }, this));
 
             this.updateButtonText();
             this.updateSelectAll();

index.html

@@ -4322,6 +4322,78 @@ $(document).ready(function() {
 <select id="example-disable-javascript" multiple="multiple"></select>
 </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() {
+                                $('#example-large-refresh-button').on('click', function() {
+                                    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>
+                        </div>
+                    </div>
+                    <div class="highlight">
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+    $(document).ready(function() {
+        $('#example-confirmation').multiselect({
+            onChange: function(element, checked) {
+                if(checked === true) {
+                    //action taken here if true
+                }
+                else if(checked === false) {
+                    if(confirm('Do you wish to deselect the element?')) {
+                        //action taken here
+                    }
+                    else {
+                        $("#example-confirmation").multiselect('select', element.val());
+                    }
+                }
+            }
+        });
+    });
+&lt;/script&gt;
+</pre>
+                    </div>
+                        
                     <div class="page-header">
                         <h2 id="post">Server-Side Processing</h2>
                     </div>