Update bootstrap-multiselect.js

This allows for the handling of optgroups as a header inside of the dropdown.

js/bootstrap-multiselect.js

@@ -115,7 +115,8 @@
 			buttonContainer: '<div class="btn-group" />',
 			// Maximum height of thet dropdown menu.
 			// If maximum height is exceeded a scrollbar will be displayed.
-            maxHeight: 400
+			maxHeight: 400,
+			showGroups: false,
 		},
 		
 		isMobile: function() {
@@ -124,10 +125,7 @@
 
 		constructor: Multiselect,
 		
-		buildDrowdown: function(select, options){
-
-            // Build the dropdown.
-            $('option', this.$select).each($.proxy(function(index, element) {
+		createOptionValue: function(element) {
 			if ($(element).is(':selected')) {
 				$(element).attr('selected', 'selected');
 				$(element).prop('selected', 'selected');
@@ -147,7 +145,24 @@
 			if (selected) {
 				checkbox.parents('li').addClass('active');
 			}
+		},
+
+		buildDrowdown: function(select, options){
+
+			// Build the dropdown.
+			if ((this.options.showGroups) && ($('optgroup', this.$select).length > 0)) {
+				$('optgroup', this.$select).each($.proxy(function(index, group) {
+					var groupName = $(group).prop('label');
+					$('ul', this.$container).append('<li><label style="margin:0;padding:3px 20px 3px 20px;width:100%;height:100%;" class="multiselect-group"> ' + groupName + '</label></li>');
+					$('option', group).each($.proxy(function(index, element) {
+						this.createOptionValue(element);
+					}, this));
 				}, this));
+			} else {
+				$('option', this.$select).each($.proxy(function(index, element) {
+					this.createOptionValue(element);
+				}, this));
+			}
 
 			// Bind the change event on the dropdown elements.
 			$('ul li input[type="checkbox"]', this.$container).on('change', $.proxy(function(event) {