<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap Multiselect</title>
		<meta name="robots" content="noindex, nofollow" />
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<meta name="copyright" content="David Stutz" />

		<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
		<link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css">
		<link rel="stylesheet" href="css/prettify.css" type="text/css">

		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
		<script type="text/javascript" src="js/prettify.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="hero-unit">
				<h1>Bootstrap Multiselect</h1>
				<p>
					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.
				</p>
			</div>
			<p class="alert alert-info">
				<b>Note:</b> The option names may have changed due to the latest updates.
			</p>
			<div class="page-header">
				<h1>Examples</h1>
			</div>
			<script type="text/javascript">
				$(document).ready(function() {
					window.prettyPrint() && prettyPrint();
					
					$('#example1').multiselect();
					
					$('#example2').multiselect();
					
					$('#example3').multiselect({
						buttonClass: 'btn btn-link'
					});
					
					$('#example4').multiselect({
						buttonClass: 'btn btn-small'
					});
					
					$('#example5').multiselect({
						buttonClass: 'btn btn-primary disabled'
					});
					
					$('#example6').multiselect();
					
					$('.example7').multiselect({
						buttonContainer: '<span class="dropdown" />',
					});
					
					$('#example9').multiselect({
						onChange:function(element, checked){
							alert('Change event invoked!');
							console.log(element);
						}
					});
					
					for (var i = 1; i <= 100; i++) {
						$('#example11').append('<option value="' + i + '">Options ' + i + '</option>');
					}
					$('#example11').multiselect({
						maxHeight: 200
					})
					
					$('#example13').multiselect();
					
					$('#example14').multiselect({
						buttonWidth: '500px',
						buttonText: function(options) {
			                if (options.length == 0) {
			                    return 'None selected <b class="caret"></b>';
			                }
			                else {
			                    var selected = '';
			                    options.each(function() {
			                        selected += $(this).text() + ', ';
			                    });
			                    return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
			                }
			            }
					});
					
					$('#example16').multiselect({
						onChange: function(option, checked) {
							$('#example16').multiselect('select', option.val());
						}
					});
					
					$('#example19').multiselect();

					$('#example20').multiselect({
						selectedClass: null
					});
					
					$('#example23').multiselect();
					
					$('#example24').multiselect();

                                        $('#example25').multiselect({dropRight: true});
				});
			</script>
			<p>
				The best way learning from the examples is using firebug, chrome developer tools or similar tools for your browser. Examine the generated markup and used javascript code.
			</p>
			<table class="table table-striped">
				<tr>
					<td>
						<select id="example1">
							<option value="cheese" selected>Cheese</option>
							<option value="tomatoes" selected>Tomatoes</option>
							<option value="mozarella">Mozzarella</option>
							<option value="mushrooms">Mushrooms</option>
							<option value="pepperoni">Pepperoni</option>
							<option value="onions">Onions</option>
						</select>
					</td>
					<td>
						Normal select. The plugin will add the <code>multiple="multiple"</code> attribute automatically. The first option is selected automatically by the browser when ommitting the <code>multiple</code> attribute. But note: If the <code>mutliple</code> attribute is omitted and more than one option is selected by default, the browser will select the last selected option before the plugin has the chance to add the <code>mutliple</code> attribute.
					</td>
				</tr>
				<tr>
					<td>
						<select id="example2" multiple="multiple">
							<option value="cheese" selected>Cheese</option>
							<option value="tomatoes" selected>Tomatoes</option>
							<option value="mozarella" selected>Mozzarella</option>
							<option value="mushrooms">Mushrooms</option>
							<option value="pepperoni">Pepperoni</option>
							<option value="onions">Onions</option>
						</select>
					</td>
					<td>
						Select with preselected options: <code>&lt;option value=&quot;cheese&quot; selected&gt;Cheese&lt;/option&gt;</code>
					</td>
				</tr>
				<tr>
					<td>
						<select id="example3" multiple="multiple">
							<option value="cheese">Cheese</option>
							<option value="tomatoes">Tomatoes</option>
							<option value="mozarella">Mozzarella</option>
							<option value="mushrooms">Mushrooms</option>
							<option value="pepperoni">Pepperoni</option>
							<option value="onions">Onions</option>
						</select>
					</td>
					<td>
						As link using <code>buttonClass: &apos;btn btn-link&apos;</code>.
					</td>
				</tr>
				<tr>
					<td>
						<select id="example4" multiple="multiple">
							<option value="cheese">Cheese</option>
							<option value="tomatoes">Tomatoes</option>
							<option value="mozarella">Mozzarella</option>
							<option value="mushrooms">Mushrooms</option>
							<option value="pepperoni">Pepperoni</option>
							<option value="onions">Onions</option>
						</select>
					</td>
					<td>
						Small button using <code>buttonClass: &apos;btn btn-small&apos;</code>.
					</td>
				</tr>
				<tr>
					<td>
						<select id="example5" multiple="multiple">
							<option value="cheese">Cheese</option>
							<option value="tomatoes">Tomatoes</option>
							<option value="mozarella">Mozzarella</option>
							<option value="mushrooms">Mushrooms</option>
							<option value="pepperoni">Pepperoni</option>
							<option value="onions">Onions</option>
						</select>
					</td>
					<td>
						Disabled using <code>buttonClass: &apos;btn btn-primary disabled&apos;</code>.
					</td>
				</tr>
				<tr>
					<td>
						<div class="input-prepend input-append btn-toolbar">
							<span class="add-on"><b class="icon-list-alt"></b></span>
							<select id="example6" multiple="multiple">
								<option value="cheese">Cheese</option>
								<option value="tomatoes">Tomatoes</option>
								<option value="mozarella">Mozzarella</option>
								<option value="mushrooms">Mushrooms</option>
								<option value="pepperoni">Pepperoni</option>
								<option value="onions">Onions</option>
							</select>
							<button class="btn btn-danger">Cancel</button>
							<button class="btn btn-success">Save</button>
						</div>
					</td>
					<td>
						Multiple select within a group with add-ons and default container for the plugin: <code>buttonContainer: &apos;&lt;div class="btn-group" /&gt;&apos;</code>.
					</td>
				</tr>
				<tr>
					<td>
						<div class="input-prepend input-append">
							<span class="add-on"><b class="icon-list-alt"></b></span>
							<select class="example7" multiple="multiple">
								<option value="cheese">Cheese</option>
								<option value="tomatoes">Tomatoes</option>
								<option value="mozarella">Mozzarella</option>
								<option value="mushrooms">Mushrooms</option>
								<option value="pepperoni">Pepperoni</option>
								<option value="onions">Onions</option>
							</select>
							<select class="example7" multiple="multiple">
								<option value="large">Extra Cheese</option>
								<option value="extra">Extra Large</option>
							</select>
							<button class="btn btn-primary">Save</button>
						</div>
					</td>
					<td>
						Multiple selects within a group using <code>buttonContainer: &apos;&lt;span class="dropdown" /&gt;&apos;</code>.
					</td>
				</tr>
				<tr>
					<td>
						<select id="example9" multiple="multiple">
							<option value="cheese">Cheese</option>
							<option value="tomatoes">Tomatoes</option>
							<option value="mozarella">Mozzarella</option>
							<option value="mushrooms">Mushrooms</option>
							<option value="pepperoni">Pepperoni</option>
							<option value="onions">Onions</option>
						</select>
					</td>
					<td>
						Using the <code>onChange</code> option you can add an event handler to the change event. The event handler gets the selected option as first parameter and a variable saying whether the option is checked or not as second one.
					</td>
				</tr>
				<tr>
					<td>
						<select id="example11" multiple="multiple">
							
						</select>
					</td>
					<td>
						For long option lists the <code>maxHeight</code> option can be set.
					</td>
				</tr>
				<tr>
					<td>
						<select id="example13" multiple="multiple">
							<option value="enabled1">Enabled 1</option>
							<option value="enabled2">Enabled 2</option>
							<option value="disabled2" disabled="disabled">Disabled 1</option>
						</select>
					</td>
					<td>
						The plugin supports disabled options, too: <code>disabled=&quot;disabled&quot;</code>
					</td>
				</tr>
				<tr>
					<td>
						<select id="example14" multiple="multiple">
							<option value="cheese">Cheese</option>
							<option value="tomatoes">Tomatoes</option>
							<option value="mozarella">Mozzarella</option>
							<option value="mushrooms">Mushrooms</option>
							<option value="pepperoni">Pepperoni</option>
							<option value="onions">Onions</option>
						</select>
					</td>
					<td>
						Use the <code>buttonWidth</code> option to adjust the width of the button.
					</td>
				</tr>
				<tr>
					<td>
						<div class="btn-group">
							<select id="example16" multiple="multiple">
								<option value="cheese">Cheese</option>
								<option value="tomatoes">Tomatoes</option>
								<option value="mozarella">Mozzarella</option>
								<option value="mushrooms">Mushrooms</option>
								<option value="pepperoni">Pepperoni</option>
								<option value="onions">Onions</option>
							</select>
						</div>
					</td>
					<td>
						Using the <code>onChange</code> option to prevent user from deselecting selected options.
					</td>
				</tr>
				<tr>
					<td>
						<div class="btn-group">
							<select id="example19" multiple="multiple">
								<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 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">
							<select id="example20" multiple="multiple">
								<option value="cheese">Cheese</option>
								<option value="tomatoes">Tomatoes</option>
								<option value="mozarella">Mozzarella</option>
								<option value="mushrooms">Mushrooms</option>
								<option value="pepperoni">Pepperoni</option>
								<option value="onions">Onions</option>
							</select>
						</div>
					</td>
					<td>
						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>
                <tr>
                    <td>
						<div class="pull-left">
                        	<div class="btn-group">
                                	<select id="example25" 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>
						</div>
                    </td>
                    <td>
                        Make the menu drop right instead of dropping left with <code>dropRight</code>.
                    </td>
                </tr>
				<tr>
					<td>
						<select id="example26" multiple="multiple" data-role="multiselect">
							<option value="cheese">Cheese</option>
							<option value="tomatoes">Tomatoes</option>
							<option value="mozarella">Mozzarella</option>
							<option value="mushrooms">Mushrooms</option>
							<option value="pepperoni">Pepperoni</option>
							<option value="onions">Onions</option>
						</select>
					</td>
					<td>
						Using the <code>data-role="multiselect"</code> attribute for automatic wireup.
					</td>
				</tr>
			</table>
			<div class="page-header">
				<h1>Code</h1>
			</div>
			<p>
				Basic markup used in the above examples:
			</p>
			<pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.min.css&quot; type=&quot;text/css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap-responsive.min.css&quot; type=&quot;text/css&quot;&gt;

&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/bootstrap-multiselect.js&quot;&gt;&lt;/script&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
  $(document).ready(function() {
    $(&#39;.multiselect&#39;).multiselect({
      buttonClass: &apos;btn&apos;,
      buttonWidth: &apos;auto&apos;,
      buttonContainer: &apos;&lt;div class=&quot;btn-group&quot; /&gt;&apos;,
      maxHeight: false,
      buttonText: function(options) {
        if (options.length == 0) {
          return &apos;None selected &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
        }
        else if (options.length > 3) {
          return options.length + &apos; selected  &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
        }
        else {
          var selected = &apos;&apos;;
          options.each(function() {
            selected += $(this).text() + &apos;, &apos;;
          });
          return selected.substr(0, selected.length -2) + &apos; &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
        }
      }
    });
  });
&lt;/script&gt;

&lt;select class=&quot;multiselect&quot; multiple=&quot;multiple&quot;&gt;
  &lt;option value=&quot;cheese&quot;&gt;Cheese&lt;/option&gt;
  &lt;option value=&quot;tomatoes&quot;&gt;Tomatoes&lt;/option&gt;
  &lt;option value=&quot;mozarella&quot;&gt;Mozzarella&lt;/option&gt;
  &lt;option value=&quot;mushrooms&quot;&gt;Mushrooms&lt;/option&gt;
  &lt;option value=&quot;pepperoni&quot;&gt;Pepperoni&lt;/option&gt;
  &lt;option value=&quot;onions&quot;&gt;Onions&lt;/option&gt;
&lt;/select&gt;

&lt;div class=&quot;input-prepend input-append&quot;&gt;
  &lt;span class=&quot;add-on&quot;&gt;&lt;b class=&quot;icon-list-alt&quot;&gt;&lt;/b&gt;&lt;/span&gt;
  &lt;select class=&quot;multiselect&quot; multiple=&quot;multiple&quot;&gt;
    &lt;option value=&quot;cheese&quot;&gt;Cheese&lt;/option&gt;
    &lt;option value=&quot;tomatoes&quot;&gt;Tomatoes&lt;/option&gt;
    &lt;option value=&quot;mozarella&quot;&gt;Mozzarella&lt;/option&gt;
    &lt;option value=&quot;mushrooms&quot;&gt;Mushrooms&lt;/option&gt;
    &lt;option value=&quot;pepperoni&quot;&gt;Pepperoni&lt;/option&gt;
    &lt;option value=&quot;onions&quot;&gt;Onions&lt;/option&gt;
  &lt;/select&gt;
  &lt;button class=&quot;btn btn-danger&quot;&gt;Cancel&lt;/button&gt;
  &lt;button class=&quot;btn btn-success&quot;&gt;Save&lt;/button&gt;
&lt;/div&gt;
			</pre>
			<div class="page-header">
				<h1>Methods</h1>
			</div>
			<script type="text/javascript">
				$(document).ready(function() {
					$('#example8').multiselect({
						buttonContainer: '<span />'
					});
					$('#example8-destroy').on('click', function() {
						$('#example8').multiselect('destroy');
					});
					
					$('#example10').multiselect({
						buttonContainer: '<span />'
					});
					$('#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() {
						$('option', $('#example10')).each(function(element) {
							$(this).removeAttr('selected');
						});
					});
					$('#example10-refresh').on('click', function() {
						$('#example10').multiselect('refresh');
					});
					
					$('#example12').multiselect({
						buttonContainer: '<span />'
					});
					$('#example12-rebuild').on('click', function() {
						$('#example12').multiselect('rebuild');
					});
					$('#example12-add').on('click', function() {
						$('#example12').append('<option value="add1">Addition 1</option><option value="add2">Addition 2</option><option value="add3">Addition 3</option>');
					});
					$('#example12-delete').on('click', function() {
						$('option[value="add1"]', $('#example12')).remove();
						$('option[value="add2"]', $('#example12')).remove();
						$('option[value="add3"]', $('#example12')).remove();
					});
					
					$('#example17').multiselect({
						buttonContainer: '<span />'
					});
					$('#example17-cheese').on('click', function() {
						$('#example17').multiselect('select', 'cheese');
					});
					$('#example17-mushrooms').on('click', function() {
						$('#example17').multiselect('select', 'mushrooms');
					});
					
					$('#example18').multiselect({
						buttonContainer: '<span />'
					});
					$('#example18-cheese').on('click', function() {
						$('#example18').multiselect('deselect', 'cheese');
					});
					$('#example18-mushrooms').on('click', function() {
						$('#example18').multiselect('deselect', 'mushrooms');
					});
				});
			</script>
			<style type="text/css">
				.multiselect-group {
					font-weight: bold;
				}
			</style>
			<table class="table table-striped">
				<tbody>
					<tr>
						<td width="20%"><code>.multiselect('destroy')</code></td>
						<td>
							<div class="btn-group">
								<select id="example8" multiple="multiple">
									<option value="cheese">Cheese</option>
									<option value="tomatoes">Tomatoes</option>
									<option value="mozarella">Mozzarella</option>
									<option value="mushrooms">Mushrooms</option>
									<option value="pepperoni">Pepperoni</option>
									<option value="onions">Onions</option>
								</select>
								<button id="example8-destroy" class="btn btn-danger">Destroy/Unbind</button>
							</div>
						</td>
						<td>
							This method is used to destroy the plugin on the given element - meaning unbinding the plugin.
						</td>
					</tr>
					<tr>
						<td><code>.multiselect('refresh')</code></td>
						<td>
							<div class="btn-group">
								<select id="example10" multiple="multiple">
									<option value="cheese">Cheese</option>
									<option value="tomatoes">Tomatoes</option>
									<option value="mozarella">Mozzarella</option>
									<option value="mushrooms">Mushrooms</option>
									<option value="pepperoni">Pepperoni</option>
									<option value="onions">Onions</option>
								</select>
								<button id="example10-select" class="btn">Select some options</button>
								<button id="example10-deselect" class="btn">Deselect all</button>
								<button id="example10-refresh" class="btn btn-primary">Refresh</button>
							</div>
						</td>
						<td>
							This method is used to refresh the checked checkboxes based on the currently selected options within the select. Click &apos;Select some options&apos; so select some of the options (meaning added the <code>selected</code> attribute to some of the options). Then click refresh. The plugin will update the checkboxes accordingly.
						</td>
					</tr>
					<tr>
						<td><code>.multiselect('rebuild')</code></td>
						<td>
							<div class="btn-group">
								<select id="example12" multiple="multiple">
									<option value="cheese">Cheese</option>
									<option value="tomatoes">Tomatoes</option>
									<option value="mozarella">Mozzarella</option>
									<option value="mushrooms">Mushrooms</option>
									<option value="pepperoni">Pepperoni</option>
									<option value="onions">Onions</option>
								</select>
								<button id="example12-add" class="btn">Add some options</button>
								<button id="example12-delete" class="btn">Delete some options</button>
								<button id="example12-rebuild" class="btn btn-primary">Rebuild</button>
							</div>
						</td>
						<td>
							Rebuilds the whole dropdown menu. All selected options will remain selected (if still existent!).
						</td>
					</tr>
					<tr>
						<td><code>.multiselect('select', value)</code></td>
						<td>
							<div class="btn-group">
								<select id="example17" multiple="multiple">
									<option value="cheese">Cheese</option>
									<option value="tomatoes">Tomatoes</option>
									<option value="mozarella">Mozzarella</option>
									<option value="mushrooms">Mushrooms</option>
									<option value="pepperoni">Pepperoni</option>
									<option value="onions">Onions</option>
								</select>
								<button id="example17-cheese" class="btn">Select cheese</button>
								<button id="example17-mushrooms" class="btn">Select Mushrooms</button>
							</div>
						</td>
						<td>
							Selects an option by its value.
						</td>
					</tr>
					<tr>
						<td><code>.multiselect('deselect', value)</code></td>
						<td>
							<div class="btn-group">
								<select id="example18" multiple="multiple">
									<option value="cheese">Cheese</option>
									<option value="tomatoes">Tomatoes</option>
									<option value="mozarella">Mozzarella</option>
									<option value="mushrooms">Mushrooms</option>
									<option value="pepperoni">Pepperoni</option>
									<option value="onions">Onions</option>
								</select>
								<button id="example18-cheese" class="btn">Deselect cheese</button>
								<button id="example18-mushrooms" class="btn">Deselect Mushrooms</button>
							</div>
						</td>
						<td>
							Deselect an option by its value.
						</td>
					</tr>
				</tbody>
			</table>
			
			<div class="page-header">
				<h1>Further Examples</h1>
			</div>
			<script type="text/javascript">
 				/**
				 * Gets whether all the options are selected
				 * @param {jQuery} $el
				 * @returns {bool}
				 */
				function multiselect_selected($el) {
					var ret = true;
					$('option', $el).each(function(element) {
						if (!!!$(this).attr('selected')) {
							ret = false;
						}
					});
					return ret;
				}
				 
				/**
				 * Selects all the options
				 * @param {jQuery} $el
				 * @returns {undefined}
				 */
				function multiselect_selectAll($el) {
					$('option', $el).each(function(element) {
						$el.multiselect('select', $(this).val());
					});
					console.log($('option[selected]', $el).length)
				}
				/**
				 * Deselects all the options
				 * @param {jQuery} $el
				 * @returns {undefined}
				 */
				function multiselect_deselectAll($el) {
					$('option', $el).each(function(element) {
						$el.multiselect('deselect', $(this).val());
					});
					console.log($('option[selected]', $el).length)
				}
				 
				/**
				 * Clears all the selected options
				 * @param {jQuery} $el
				 * @returns {undefined}
				 */
				function multiselect_toggle($el, $btn) {
					if (multiselect_selected($el)) {
						multiselect_deselectAll($el);
						$btn.text("Select All");
					}
					else {
						multiselect_selectAll($el);
						$btn.text("Deselect All");
					}
				}
				 
				$(document).ready(function() {
					$('#example21').multiselect({
						buttonContainer: '<span />'
					});
					$("#example21-toggle").click(function(e) {
						e.preventDefault();
						multiselect_toggle($("#example21"), $(this));
					});
					
					$('#example22').multiselect({
				        buttonClass: 'btn',
				        buttonWidth: 'auto',
				        buttonText: function(options) {
							if (options.length == 0) {
					            return 'None selected <b class="caret"></b>';
					        }
					        else if (options.length > 6) {
					            return options.length + ' selected  <b class="caret"></b>';
					        }
					        else {
					            var selected = '';
					            options.each(function() {
					              selected += $(this).text() + ', ';
					            });
	
					            return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
					        }
				        },
				        onChange: function(element, checked) {
							if(checked == true) {
				                //action taken here if true
				            }
							else if(checked == false) {
				                if(confirm('Do you wish to deselect the element?')) {
				                    //action taken here
				                }
				                else {
				                    $("#example22").multiselect('select', element.val());
				                }
				            }
						}
				    });
				});
			</script>
			<table class="table table-striped">
				<tbody>
					<tr>
						<td>
							<div class="btn-group">
								<select id="example21" multiple="multiple">
									<option value="cheese">Cheese</option>
									<option value="tomatoes">Tomatoes</option>
									<option value="mozarella">Mozzarella</option>
									<option value="mushrooms">Mushrooms</option>
									<option value="pepperoni">Pepperoni</option>
									<option value="onions">Onions</option>
								</select>
								<button id="example21-toggle" class="btn btn-primary">Select All</button>
							</div>
						</td>
						<td>
							<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
	/**
	 * Gets whether all the options are selected
	 * @param {jQuery} $el
	 * @returns {bool}
	 */
	function multiselect_selected($el) {
		var ret = true;
		$('option', $el).each(function(element) {
			if (!!!$(this).attr('selected')) {
				ret = false;
			}
		});
		return ret;
	}
	 
	/**
	 * Selects all the options
	 * @param {jQuery} $el
	 * @returns {undefined}
	 */
	function multiselect_selectAll($el) {
		$('option', $el).each(function(element) {
			$el.multiselect('select', $(this).val());
		});
		console.log($('option[selected]', $el).length)
	}
	/**
	 * Deselects all the options
	 * @param {jQuery} $el
	 * @returns {undefined}
	 */
	function multiselect_deselectAll($el) {
		$('option', $el).each(function(element) {
			$el.multiselect('deselect', $(this).val());
		});
		console.log($('option[selected]', $el).length)
	}
	 
	/**
	 * Clears all the selected options
	 * @param {jQuery} $el
	 * @returns {undefined}
	 */
	function multiselect_toggle($el, $btn) {
		if (multiselect_selected($el)) {
			multiselect_deselectAll($el);
			$btn.text(&quot;Select All&quot;);
		}
		else {
			multiselect_selectAll($el);
			$btn.text(&quot;Deselect All&quot;);
		}
	}
	 
	$(document).ready(function() {
		$('#example21').multiselect({
			buttonContainer: '&lt;span /&gt;'
		});
		$(&quot;#example21-toggle&quot;).click(function(e) {
			e.preventDefault();
			multiselect_toggle($(&quot;#example21&quot;), $(this));
		});
	});
&lt;/script&gt;
							</pre>
						</td>
					</tr>
					<tr>
						<td>
							<div class="btn-group">
								<select id="example22" multiple="multiple">
									<option value="cheese">Cheese</option>
									<option value="tomatoes">Tomatoes</option>
									<option value="mozarella">Mozzarella</option>
									<option value="mushrooms">Mushrooms</option>
									<option value="pepperoni">Pepperoni</option>
									<option value="onions">Onions</option>
								</select>
							</div>
						</td>
						<td>
							<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
	$(document).ready(function() {
		$('#example22').multiselect({
			buttonClass: 'btn',
			buttonWidth: 'auto',
			buttonText: function(options) {
				if (options.length == 0) {
		            return 'None selected &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;';
		        }
		        else if (options.length &gt; 6) {
		            return options.length + ' selected  &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;';
		        }
		        else {
		            var selected = '';
		            options.each(function() {
						selected += $(this).text() + ', ';
		            });
		
					return selected.substr(0, selected.length -2) + ' &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;';
				}
			},
			onChange: function(element, checked) {
				if(checked == true) {
					//action taken here if true
				}
				else if(checked == false) {
					if(confirm('Do you wish to deselect the element?')) {
						//action taken here
					}
					else {
						$(&quot;#example22&quot;).multiselect('select', element.val());
						return false;
					}
				}
			}
		});
	});
&lt;/script&gt;
							</pre>
						</td>
					</tr>
				</tbody>
			</table>
			
			<div class="page-header">
				<h1>Options</h1>
			</div>
			<table class="table table-striped">
				<thead>
					<tr>
						<th>Option</th>
						<th width="30%">Explanation</th>
						<th>Usage</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><code>buttonText</code></td>
						<td>A function returning the string displayed if options are selected. All currently selected options and the select are passed as argument. In addition HTML can be added to the button, for example the caret icon seen in the examples.</td>
						<td>
							<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
  $(document).ready(function() {
    $(&#39;.multiselect&#39;).multiselect({
      buttonText: function(options, select) {
        if (options.length == 0) {
          return &apos;None selected &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
        }
        else if (options.length > 3) {
          return options.length + &apos; selected  &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
        }
        else {
          var selected = &apos;&apos;;
          options.each(function() {
            selected += $(this).text() + &apos;, &apos;;
          });
          return selected.substr(0, selected.length -2) + &apos; &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
        }
      }
    });
  });
&lt;/script&gt;
							</pre>
						</td>
					</tr>
					<tr>
						<td><code>buttonClass</code></td>
						<td>The class of the dropdown button. Default: <code>btn</code>.</td>
						<td>
							<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
  $(document).ready(function() {
    $(&#39;.multiselect&#39;).multiselect({
      buttonClass: &apos;btn-primary btn-large&apos;,
    });
  });
&lt;/script&gt;
							</pre>
						</td>
					</tr>
					<tr>
						<td><code>buttonWidth</code></td>
						<td>
							The width of the dropdown button. Default: <code>auto</code>.
							Allowed formats:
							<ul>
								<li><code>100px</code></li>
								<li><code>50%</code></li>
								<li><code>auto</code></li>
							</ul>
							If the width is defined using CSS the option should be set to <code>false</code>.
						</td>
						<td>
							<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
  $(document).ready(function() {
    $(&#39;.multiselect&#39;).multiselect({
      buttonWidth: &apos;300px&apos;,
    });
  });
&lt;/script&gt;
							</pre>
						</td>
					</tr>
					<tr>
						<td><code>buttonContainer</code></td>
						<td>
							The used container holding both the dropdown button and the dropdown menu. Default: <code>&lt;div class="btn-group" /&gt;</code>.
						</td>
						<td>
							<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
  $(document).ready(function() {
    $(&#39;.multiselect&#39;).multiselect({
      buttonContainer: &apos;&lt;span class="dropdown" /&gt;&apos;,
    });
  });
&lt;/script&gt;
							</pre>
						</td>
					</tr>
					<tr>
						<td><code>selectedClass</code></td>
						<td>The class applied to the parent &lt;li&gt; of selected items. Default: <code>active</code>.</td>
						<td>
							<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
  $(document).ready(function() {
    $(&#39;.multiselect&#39;).multiselect({
      selectedClass: null,
    });
  });
&lt;/script&gt;
							</pre>
						</td>
					</tr>
					<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() {
    $(&#39;.multiselect&#39;).multiselect({
      onChange: function(element, checked) {
      	alert(&apos;Change event invoked!&apos;);
      },
    });
  });
&lt;/script&gt;
							</pre>
						</td>
					</tr>
					<tr>
						<td><code>maxHeight</code></td>
						<td>
							Used for a long list of options this option defines the maximum height of the dropdown menu. If the size is exceeded a scrollbar will appear.
						</td>
						<td>
							<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
  $(document).ready(function() {
    $(&#39;.multiselect&#39;).multiselect({
      maxHeight: 400,
    });
  });
&lt;/script&gt;
							</pre>
						</td>
					</tr>
				</tbody>
			</table>
			<div class="page-header">
				<h1>Additional Styling</h1>
			</div>
			<p>For additionaly styling of the multiselect button the CSS class <code>multiselect</code> can be used.</p>
			<style type="text/css">
				.add-styling .multiselect {
					width: 500px;
					text-align: left;
				}
				.add-styling .multiselect b.caret {
					position: absolute;
					right: 5px;
				}
				.add-styling .multiselect-group {
					font-weight: bold;
					text-decoration: underline;
				}
			</style>
			<script type="text/javascript">
				$(document).ready(function() {
					$('#example15').multiselect({
						buttonWidth: '500px',
						buttonText: function(options) {
			                if (options.length == 0) {
			                    return 'None selected <b class="caret"></b>';
			                }
			                else {
			                    var selected = '';
			                    options.each(function() {
			                        selected += $(this).text() + ', ';
			                    });
			                    return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
			                }
			            }
					});
				});
			</script>
			<div class="add-styling">
				<table class="table table-striped">
					<tr>
						<td>
							<select id="example15" multiple="multiple">
								<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>
						</td>
						<td>
							Text alignment combined with fixed width and bold, underlined text for option group headers.
						</td>
						<td>
							<pre class="prettyprint linenums">
.multiselect {
	text-align: left;
}
.multiselect b.caret {
	float: right;
}
.multiselect-group {
	font-weight: bold;
	text-decoration: underline;
}
							</pre>
						</td>
					</tr>
				</table>
			</div>
			</p>
			<hr>
			<p>
				&copy; 2012
				<a href="http://davidstutz.de">David Stutz</a> - <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>
			</p>
		</div>
	</body>
</html>