Scrollbar support, option names.

Added support for adding a maximum height property to the dropdown list.
Renamed some options.

README.md

@@ -2,6 +2,8 @@
 
 Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.
 
+**Note:** The option names may have changed due to the latest updates.
+
 ## Demo
 
 A demo of different configurations can be found [here](http://davidstutz.github.com/bootstrap-multiselect/).
@@ -22,17 +24,17 @@ These examples can also be seen in action in index.html:
 			$('#example1').multiselect();
 			$('#example2').multiselect();
 			$('#example3').multiselect({
-				button: 'btn btn-link'
+				buttonClass: 'btn btn-link'
 			});
 			$('#example4').multiselect({
-				button: 'btn btn-small'
+				buttonClass: 'btn btn-small'
 			});
 			$('#example5').multiselect({
-				button: 'btn btn-primary disabled'
+				buttonClass: 'btn btn-primary disabled'
 			});
 			$('#example6').multiselect();
 			$('.example7').multiselect({
-				container: '<span class="dropdown" />',
+				buttonContainer: '<span class="dropdown" />',
 			});
 		});
 	</script>
@@ -124,23 +126,23 @@ These examples can also be seen in action in index.html:
 
 ## Configuration Options
 
-**button**
+**buttonClass**
 
 Define the appearance of the button using classes. See the [Bootstrap documentation](http://twitter.github.com/bootstrap/base-css.html#buttons) for more information.
 
 	$(document).ready(function() {
 		$('.multiselect').multiselect({
-			'none': 'select something...'
+			buttonClass: 'btn btn-small'
 		});
 	});
 	
-**width**
+**buttonWidth**
 
 The width of the dropdown button. 
 
 	$(document).ready(function() {
 		$('.multiselect').multiselect({
-			'width': 'auto', // Default
+			buttonWidth: 'auto', // Default
 		});
 	});
 
@@ -150,52 +152,63 @@ The width can be defined using all formats accepted by CSS:
 	50%
 	auto
 	
-**text**
+**buttonText**
 
 Defining the text of the button. Must be a function returning a string. All currently selected options are passed as parameter.
 
 	$(document).ready(function() {
 		$('.multiselect').multiselect({
-			'text': function(options) {
+			buttonText: function(options) {
 				if (options.length == 0) {
-					return 'None selected';
+					return 'None selected <b class="caret"></b>';
 				}
 				else if (options.length > 3) {
-					return options.length + ' selected';
+					return options.length + ' selected <b class="caret"></b>';
 				}
 				else {
 					var selected = '';
 					options.each(function() {
 						selected += $(this).text() + ', ';
 					});
-					return selected.substr(0, selected.length -2);
+					return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
 				}
 			},
 		});
 	});
 	
-**container**
+**buttonContainer**
 
 The used container holding both the dropdown button and the dropdown menu.
 
 	$(document).ready(function() {
 		$('.multiselect').multiselect({
-			container: '<span class="dropdown" />',
+			buttonContainer: '<span class="dropdown" />',
 		});
 	});
 
-**onchange**
+**onChange**
 
 Assign an event handler to the change event:
 
 	$(document).ready(function() {
 		$('.multiselect').multiselect({
-			onchange:function(element, checked){
+			onChange:function(element, checked){
 				alert('Change event invoked!');
 				console.log(element);
 			}
 		});
 	});
+	
+**maxHeight**
+
+Define the maximum height property of the dropdown list. If the maximum height of the option list is exceeded a scrollbar will be displayed.
+
+	$(document).ready(function() {
+		$('.multiselect').multiselect({
+			// Or false for no maximum height.
+			maxHeight: 400,
+		});
+	});
 
 ## Methods
 

js/bootstrap-multiselect.js

@@ -24,10 +24,19 @@
 		
 		this.options = this.getOptions(options);
 		this.select = $(select);
-		this.container = $(this.options.container)
-				.append('<button type="button" style="width:' + this.options.width + '" class="dropdown-toggle ' + this.options.button + '" data-toggle="dropdown">' + this.options.text($('option:selected', select)) + ' <b class="caret"></b></button>')
+		this.container = $(this.options.buttonContainer)
+				.append('<button type="button" style="width:' + this.options.buttonWidth + '" class="dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText($('option:selected', select)) + '</button>')
 				.append('<ul class="dropdown-menu"></ul>');
 		
+		// Set max height of dropdown menu to activate auto scrollbar.
+		if (this.options.maxHeight) {
+			$('ul', this.container).css({
+				'max-height': this.options.maxHeight + 'px',
+				'overflow-y': 'auto',
+				'overflow-x': 'hidden',
+			});
+		}
+		
 		// Manually add the multiple attribute, if its not already set.
 		if (!this.select.attr('multiple')) {
 			this.select.attr('multiple', true);
@@ -36,12 +45,13 @@
 		// Build the dropdown.
 		$('option', this.select).each($.proxy(function(index, element) {
 			if ($(element).is(':selected')) {
-				$(element).attr('selected', true);
+				$(element).attr('selected', 'selected');
+				$(element).prop('selected', 'selected');
 			}
 			
-			$('ul', this.container).append('<li><a href="javascript:void(0);" style="padding:0;"><label style="margin:0;padding: 3px 20px 3px 20px;width:100%;height:100%;cursor:pointer;"><input style="margin-bottom:5px;" type="checkbox" value="' + $(element).val() + '" /> ' + $(element).text() + '</label</a></li>');
+			$('ul', this.container).append('<li><a href="javascript:void(0);" style="padding:0;"><label style="margin:0;padding:3px 20px 3px 20px;width:100%;height:100%;cursor:pointer;"><input style="margin-bottom:5px;" type="checkbox" value="' + $(element).val() + '" /> ' + $(element).text() + '</label</a></li>');
 			
-			var selected = $(element).attr('selected') || false;
+			var selected = $(element).prop('selected') || false;
 			var checkbox = $('ul li input[value="' + $(element).val() + '"]', this.container);
 				
 			checkbox.prop('checked', selected);
@@ -66,12 +76,19 @@
 			}
 			
 			var option = $('option[value="' + $(event.target).val() + '"]', this.select);
-			option.attr('selected', checked);
 			
+			if (checked) {
+				option.attr('selected', 'selected');
+				option.prop('selected', 'selected');
+			}
+			else {
+				option.removeAttr('selected');
+			}
+			console.log(option);
 			var options = $('option:selected', this.select);
-			$('button', this.container).html(this.options.text(options) + ' <b class="caret"></b>');
+			$('button', this.container).html(this.options.buttonText(options));
 			
-			this.options.onchange(option, checked);
+			this.options.onChange(option, checked);
 		}, this));
 		
 		$('ul li a', this.container).on('click', function(event) {
@@ -82,28 +99,34 @@
 	Multiselect.prototype = {
 		
 		defaults: {
-			button: 'btn',
-			width: 'auto',
 			// 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.
 			// If more than 3 options are selected, the number of selected options is printed.
-			text: function(options) {
+			buttonText: function(options) {
 				if (options.length == 0) {
-					return 'None selected';
+					return 'None selected <b class="caret"></b>';
 				}
 				else if (options.length > 3) {
-					return options.length + ' selected';
+					return options.length + ' selected <b class="caret"></b>';
 				}
 				else {
 					var selected = '';
 					options.each(function() {
 						selected += $(this).text() + ', ';
 					});
-					return selected.substr(0, selected.length -2);
+					return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
 				}
 			},
-			container: '<div class="btn-group" />',
-			onchange:function(){}
+			// Is triggered on change of the selected options.
+			onChange: function() {
+				
+			},
+			buttonClass: 'btn',
+			buttonWidth: 'auto',
+			buttonContainer: '<div class="btn-group" />',
+			// Maximum height of thet dropdown menu.
+			// If maximum height is exceeded a scrollbar will be displayed.
+			maxHeight: 400,
 		},
 
 		constructor: Multiselect,
@@ -131,7 +154,7 @@
 				}
 			}, this));
 			
-			$('button', this.container).html(this.options.text($('option:selected', this.select)) + ' <b class="caret"></b>');
+			$('button', this.container).html(this.options.buttonText($('option:selected', this.select)));
 		},
 		
 		// Get options by merging defaults and given options.