Added #469.

dist/js/bootstrap-multiselect.js

@@ -1124,7 +1124,8 @@
                     groupCounter++;
                     
                     $tag = $('<optgroup/>').attr({
-                        label: option.label || 'Group ' + groupCounter
+                        label: option.label || 'Group ' + groupCounter,
+                        disabled: !!option.disabled
                     });
                     
                     forEach(option.children, function(subOption) { // add children option tags
@@ -1132,7 +1133,8 @@
                             value: subOption.value,
                             label: subOption.label || subOption.value,
                             title: subOption.title,
-                            selected: !!subOption.selected
+                            selected: !!subOption.selected,
+                            disabled: !!subOption.disabled
                         }));
                     });
                 }
@@ -1141,7 +1143,8 @@
                         value: option.value,
                         label: option.label || option.value,
                         title: option.title,
-                        selected: !!option.selected
+                        selected: !!option.selected,
+                        disabled: !!option.disabled
                     });
                 }
                 

index.html

@@ -2916,7 +2916,7 @@
                                                         {label: 'Option 3', title: 'Option 3', value: '3', selected: true},
                                                         {label: 'Option 4', title: 'Option 4', value: '4'},
                                                         {label: 'Option 5', title: 'Option 5', value: '5'},
-                                                        {label: 'Option 6', title: 'Option 6', value: '6'}
+                                                        {label: 'Option 6', title: 'Option 6', value: '6', disabled: true}
                                                     ];
                                                     $('#example-dataprovider').multiselect('dataprovider', options);
                                                 });
@@ -2935,7 +2935,7 @@
         {label: 'Option 3', title: 'Option 3', value: '3', selected: true},
         {label: 'Option 4', title: 'Option 4', value: '4'},
         {label: 'Option 5', title: 'Option 5', value: '5'},
-        {label: 'Option 6', title: 'Option 6', value: '6'}
+        {label: 'Option 6', title: 'Option 6', value: '6', disabled: true}
     ];
     $('#example-dataprovider').multiselect('dataprovider', options);
 </script>
@@ -2956,7 +2956,7 @@
                                                     var optgroups = [
                                                         {
                                                             label: 'Group 1', children: [
-                                                                {label: 'Option 1.1', value: '1-1'},
+                                                                {label: 'Option 1.1', value: '1-1', selected: true},
                                                                 {label: 'Option 1.2', value: '1-2'},
                                                                 {label: 'Option 1.3', value: '1-3'}
                                                             ]
@@ -2965,7 +2965,7 @@
                                                             label: 'Group 2', children: [
                                                                 {label: 'Option 2.1', value: '1'},
                                                                 {label: 'Option 2.2', value: '2'},
-                                                                {label: 'Option 2.3', value: '3'}
+                                                                {label: 'Option 2.3', value: '3', disabled: true}
                                                             ]
                                                         }
                                                     ];
@@ -2983,7 +2983,7 @@
     var optgroups = [
         {
             label: 'Group 1', children: [
-                {label: 'Option 1.1', value: '1-1'},
+                {label: 'Option 1.1', value: '1-1', selected: true},
                 {label: 'Option 1.2', value: '1-2'},
                 {label: 'Option 1.3', value: '1-3'}
             ]
@@ -2992,7 +2992,7 @@
             label: 'Group 2', children: [
                 {label: 'Option 2.1', value: '1'},
                 {label: 'Option 2.2', value: '2'},
-                {label: 'Option 2.3', value: '3'}
+                {label: 'Option 2.3', value: '3', disabled: true}
             ]
         }
     ];
@@ -3791,6 +3791,43 @@
 </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() {
+                                var data = [];
+                                for (var i = 0; i < 100; i++) {
+                                    var group = {label: 'Group ' + (i + 1), children: []};
+                                    for (var j = 0; j < 10; j++) {
+                                        group['children'].push({
+                                            label: 'Option ' + (i + 1) + '.' + (j + 1),
+                                            value: i + '-' + j
+                                        });
+                                    }
+                                    
+                                    data.push(group);
+                                }
+                                
+                                $('#example-large-dataprovider-button').on('click', function() {
+                                    $('#example-large-dataprovider').multiselect({
+                                        maxHeight: 200
+                                    });
+                                    $('#example-large-dataprovider').multiselect('dataprovider', data);
+                                });
+                            });
+                        </script>
+                        <select id="example-large-dataprovider" multiple="multiple"></select>
+                    </div>
+                    <div class="highlight">
+<pre class="prettyprint linenums">
+
+</pre>
+                    
                     <div class="page-header">
                         <h2 id="post">Server-Side Processing</h2>
                     </div>