Added onDropdownShow & onDropdownHide handlers

index.html

@@ -629,12 +629,12 @@
 							</pre>
 						</td>
 					</tr>
-					<tr>
-						<td><code>onChange</code></td>
-						<td>
-							This event handler is triggered when the selected options are changed.
-						</td>
-						<td>
+                    <tr>
+                        <td><code>onChange</code></td>
+                        <td>
+                            This event handler is triggered when the selected options are changed.
+                        </td>
+                        <td>
 							<pre class="prettyprint linenums">
 &lt;script type=&quot;text/javascript&quot;&gt;
   $(document).ready(function() {
@@ -646,8 +646,46 @@
   });
 &lt;/script&gt;
 							</pre>
-						</td>
-					</tr>
+                        </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();
@@ -94,6 +96,14 @@
             // 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,
@@ -129,6 +139,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() {