Merge branch 'master' of https://github.com/davidstutz/bootstrap-multiselect

index.html

@@ -610,6 +610,23 @@
       buttonContainer: '<span class="dropdown" />'
     });
   });
+</script>
+							</pre>
+						</td>
+					</tr>
+					<tr>
+						<td><code>label</code></td>
+						<td>Function to write the label of the item.</td>
+						<td>
+							<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+  $(document).ready(function() {
+    $(&#39;.multiselect&#39;).multiselect({
+      label: function(element) {
+      	return $(element).html()+&#39; (&#39;+$(element).val()+&#39;)&#39;;
+      }
+    });
+  });
 &lt;/script&gt;
 							</pre>
 						</td>
@@ -648,6 +665,44 @@
 							</pre>
 						</td>
 					</tr>
+					<tr>
+						<td><code>onDropdownShow</code></td>
+						<td>
+							This event handler is triggered when the dropdown are shown.
+						</td>
+						<td>
+							<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+  $(document).ready(function() {
+    $(&#39;.multiselect&#39;).multiselect({
+      onDropdownShow: function(event) {
+      	alert(&apos;Show event invoked!&apos;);
+      }
+    });
+  });
+&lt;/script&gt;
+							</pre>
+						</td>
+					</tr>
+					<tr>
+						<td><code>onDropdownHide</code></td>
+						<td>
+							This event handler is triggered when the dropdown are hidden.
+						</td>
+						<td>
+							<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+  $(document).ready(function() {
+    $(&#39;.multiselect&#39;).multiselect({
+      onDropdownHide: function(event) {
+      	alert(&apos;Hide event invoked!&apos;);
+      }
+    });
+  });
+&lt;/script&gt;
+							</pre>
+						</td>
+					</tr>					
 					<tr>
 						<td><code>maxHeight</code></td>
 						<td>

js/bootstrap-multiselect.js

@@ -39,6 +39,8 @@
         
         this.options.multiple = this.$select.attr('multiple') == "multiple";
         this.options.onChange = $.proxy(this.options.onChange, this);
+        this.options.onDropdownShow = $.proxy(this.options.onDropdownShow, this);
+        this.options.onDropdownHide = $.proxy(this.options.onDropdownHide, this);
         
         // Build select all if enabled.
         this.buildContainer();
@@ -57,14 +59,14 @@
         // Default options.
         defaults: {
             // 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.
+            // option is selected, or a list of the selected options up to a length of 3 selected options by default.
             // If more than 3 options are selected, the number of selected options is printed.
             buttonText: function(options, select) {
                 if (options.length == 0) {
                     return this.nonSelectedText + ' <b class="caret"></b>';
                 }
                 else {
-                    if (options.length > 3) {
+                    if (options.length > this.numberDisplayed) {
                         return options.length + ' ' + this.nSelectedText + ' <b class="caret"></b>';
                     }
                     else {
@@ -91,9 +93,21 @@
                     return selected.substr(0, selected.length - 2);
                 }
             },
+            // Create label
+            label: function( element ){
+                return $(element).attr('label') || $(element).html();
+            },
             // Is triggered on change of the selected options.
             onChange : function(option, checked) {
 
+            },
+            // Triggered immediately when dropdown shown
+            onDropdownShow: function(event) {
+
+            },
+            // Triggered immediately when dropdown hidden
+            onDropdownHide: function(event) {
+
             },
             buttonClass: 'btn',
             dropRight: false,
@@ -113,7 +127,8 @@
             filterBehavior: 'text',
             preventInputChangeEvent: false,
             nonSelectedText: 'None selected',
-            nSelectedText: 'selected'
+            nSelectedText: 'selected',
+            numberDisplayed: 3
         },
         
         // Templates.
@@ -129,6 +144,8 @@
         
         buildContainer: function() {
             this.$container = $(this.options.buttonContainer);
+            this.$container.on('show.bs.dropdown', this.options.onDropdownShow);
+            this.$container.on('hide.bs.dropdown', this.options.onDropdownHide);
         },
         
         buildButton: function() {
@@ -322,7 +339,7 @@
             }
 
             // Support the label attribute on options.
-            var label = $(element).attr('label') || $(element).html();
+            var label = this.options.label(element);
             var value = $(element).val();
             var inputType = this.options.multiple ? "checkbox" : "radio";