Fixed #43. Added documentation #42.

Fixed issue 43 with IE 9. Added documentation for pull request 42 fixing
issues #39, #40, #41. Thanks to ses4j!

index.html

@@ -98,6 +98,10 @@
 					$('#example20').multiselect({
 						selectedClass: null
 					});
+					
+					$('#example23').multiselect();
+					
+					$('#example24').multiselect();
 				});
 			</script>
 			<p>
@@ -315,6 +319,32 @@
 						Option groups are detected automatically and for each option group an header element is added: <code>&lt;optgroup label=&quot;Mathematics&quot;&gt;...&lt;/optgroup&gt;</code>
 					</td>
 				</tr>
+				<tr>
+					<td>
+						<div class="btn-group">
+							<select id="example23" multiple="multiple">
+								<option value="lab">Lab Course</option>
+								<option value="proseminar">Proseminar</option>
+								<optgroup label="Mathematics">
+									<option value="analysis">Analysis</option>
+									<option value="algebra">Linear Algebra</option>
+									<option value="discrete">Discrete Mathematics</option>
+									<option value="numerical">Numerical Analysis</option>
+									<option value="probability">Probability Theory</option>
+								</optgroup>
+								<optgroup label="Computer Science">
+									<option value="programming">Introduction to Programming</option>
+									<option value="automata">Automata Theory</option>
+									<option value="complexity">Complexity Theory</option>
+									<option value="software">Software Engineering</option>
+								</optgroup>
+							</select>
+						</div>
+					</td>
+					<td>
+						Option groups and options without any group are supported simultaneously.
+					</td>
+				</tr>
 				<tr>
 					<td>
 						<div class="btn-group">
@@ -332,6 +362,22 @@
 						Using the <code>selectedClass</code> option to turn off the active class for selected options.
 					</td>
 				</tr>
+				<tr>
+					<td>
+						<div class="btn-group">
+							<select id="example24" multiple="multiple">
+								<option value="analysis" label="Ana">Analysis</option>
+								<option value="algebra" label="LA">Linear Algebra</option>
+								<option value="discrete" label="Discrete">Discrete Mathematics</option>
+								<option value="numerical" label="NumA">Numerical Analysis</option>
+								<option value="probability" label="Proba">Probability Theory</option>
+							</select>
+						</div>
+					</td>
+					<td>
+						Specifiy an alternaitve label for the options: <code>&lt;option label=&quot;label&quot;&gt;&lt;/option&gt;</code>
+					</td>
+				</tr>
 			</table>
 			<div class="page-header">
 				<h1>Code</h1>
@@ -413,8 +459,14 @@
 					});
 					$('#example10-select').on('click', function() {
 						$('option[value="tomatoes"]', $('#example10')).prop('selected', 'selected');
+						$('option[value="tomatoes"]', $('#example10')).attr('selected', 'selected');
+						
 						$('option[value="mushrooms"]', $('#example10')).prop('selected', 'selected');
+						$('option[value="mushrooms"]', $('#example10')).attr('selected', 'selected');
+						
 						$('option[value="onions"]', $('#example10')).prop('selected', 'selected');
+						$('option[value="onions"]', $('#example10')).attr('selected', 'selected');
+						
 						alert('Selected Tomatoes, Mushrooms and Onions.');
 					});
 					$('#example10-deselect').on('click', function() {
@@ -669,7 +721,6 @@
 				                }
 				                else {
 				                    $("#example22").multiselect('select', element.val());
-				                    return false;
 				                }
 				            }
 						}

js/bootstrap-multiselect.js

@@ -60,7 +60,7 @@
 		}
 		
 		this.$container = $(this.options.buttonContainer)
-			.append('<button type="button" class="multiselect dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText($('option[selected]', select), this.$select) + '</button>')
+			.append('<button type="button" class="multiselect dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText(this.getSelected(), this.$select) + '</button>')
 			.append('<ul class="dropdown-menu"></ul>');
 
 		if (this.options.buttonWidth) {
@@ -129,7 +129,8 @@
 				$(element).attr('selected', 'selected');
 				$(element).prop('selected', 'selected');
 			}
-
+			
+			// Support the label attribute on options.
 			var label = ($(element).attr('label') !== undefined) ?  $(element).attr('label') : $(element).text();
 			var value = $(element).val();
 			var li = $('<li><a href="javascript:void(0);" style="padding:0;"><label style="margin:0;padding:3px 20px 3px 20px;height:100%;cursor:pointer;"><input style="margin-bottom:5px;" type="checkbox" /></label></a></li>');
@@ -155,14 +156,17 @@
 		// Build the dropdown and bind event handling.
 		buildDropdown: function () {
 			this.$select.children().each($.proxy(function (index, element) {
+				// Support optgroups and options without a group simultaneously.
 				var tag = $(element).prop('tagName').toLowerCase();
 				if (tag == 'optgroup') {
 					var group = element;
 					var groupName = $(group).prop('label');
+					
 					// Add a header for the group.
 					var li = $('<li><label style="margin:0;padding:3px 20px 3px 20px;height:100%;" class="multiselect-group"></label></li>');
 					$('label', li).text(groupName);
 					$('ul', this.$container).append(li);
+					
 					// Add the options of the group.
 					$('option', group).each($.proxy(function (index, element) {
 						this.createOptionValue(element);
@@ -200,7 +204,8 @@
 					option.removeAttr('selected');
 				}
 				
-				var options = $('option[selected]', this.$select);
+				var options = this.getSelected();
+				
 				$('button', this.$container).html(this.options.buttonText(options, this.$select));
 
 				this.options.onChange(option, checked);
@@ -213,7 +218,7 @@
 			// Keyboard support.
 			this.$container.on('keydown', $.proxy(function(event) {
 				if ((event.keyCode == 9 || event.keyCode == 27) && this.$container.hasClass('open')) {
-					// close on tab or escape
+					// Close on tab or escape.
 					$(this.$container).find(".multiselect.dropdown-toggle").click();
 				}
 				else {
@@ -225,10 +230,12 @@
 
 					var index = $items.index($items.filter(':focus'));
 
-					if (event.keyCode == 38 && index > 0) {							// up
+					// Navigation up.
+					if (event.keyCode == 38 && index > 0) {
 						index--;
 					}
-					else if (event.keyCode == 40 && index < $items.length - 1) {	// down
+					// Navigate down.
+					else if (event.keyCode == 40 && index < $items.length - 1) {
 						index++;
 					}
 					else if (!~index) {
@@ -239,7 +246,7 @@
 
 					$current.focus();
 
-					// override style for items in li:active
+					// Override style for items in li:active.
 					if (this.options.selectedClass == "active") {
 						$current.css("outline", "thin dotted #333").css("outline", "5px auto -webkit-focus-ring-color");
 
@@ -285,15 +292,16 @@
 					}
 				}
 			}, this));
-
-			$('button', this.$container).html(this.options.buttonText($('option[selected]', this.$select), this.$select));
+			
+			var options = this.getSelected();
+			$('button', this.$container).html(this.options.buttonText(options, this.$select));
 		},
 		
 		// Select an option by its value.
 		select: function(value) {
 			var option = $('option', this.$select).filter(function () { return $(this).val() == value; });
-			var checkbox = $('ul li input', this.$select).filter(function () { return $(this).val() == value; });
-
+			var checkbox = $('ul li input', this.$container).filter(function () { return $(this).val() == value; });
+			
 			if (this.options.selectedClass) {
 				checkbox.parents('li').addClass(this.options.selectedClass);
 			}
@@ -303,7 +311,7 @@
 			option.attr('selected', 'selected');
 			option.prop('selected', 'selected');
 			
-			var options = $('option[selected]', this.$select);
+			var options = this.getSelected();
 			$('button', this.$container).html(this.options.buttonText(options, this.$select));
 		},
 		
@@ -321,7 +329,7 @@
 			option.removeAttr('selected');
 			option.removeProp('selected');
 			
-			var options = $('option[selected]', this.$select);
+			var options = this.getSelected();
 			$('button', this.$container).html(this.options.buttonText(options, this.$select));
 		},
 		
@@ -329,13 +337,25 @@
 		rebuild: function() {
 			$('ul', this.$container).html('');
 			this.buildDropdown(this.$select, this.options);
-			var options = $('option[selected]', this.$select);
+			var options = this.getSelected();
 			$('button', this.$container).html(this.options.buttonText(options, this.$select));
 		},
 
 		// Get options by merging defaults and given options.
 		getOptions: function(options) {
 			return $.extend({}, this.defaults, options);
+		},
+		
+		// For IE 9 support.
+		getSelected: function() {
+			if (navigator.appName == 'Microsoft Internet Explorer') {
+			    var regex  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
+			    if (regex.exec(navigator.userAgent) != null) {
+			    	return $('option:selected', this.$select);
+			  	}
+			}
+		
+			return $('option[selected]', this.$select);
 		}
 	};