Bootstrap MultiselectThese are the Bootstrap Multiselect examples
Normal select. The plugin will do single selection using radio buttons rather than multiple selection using checkboxes.
Select with preselected options: <option value="css" selected>CSS</option>
Multiselect with a 'Select all' option
Multiselect with a 'Select all' option and filtering enabled using the enableFiltering option.
The 'Select all' option automatically repsonds to the selection of the user. In particular, it responds to the initial state of the select.
Small button using buttonClass: 'btn btn-default btn-sm'
Multiple select within a group with add-ons and default container for the plugin: buttonContainer: '<div class="btn-group" />'.
Using the onChange 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.
For long option lists the maxHeight option can be set.
The plugin supports disabled options, too: disabled="disabled"
Use the buttonWidth option to adjust the width of the button.
Using the onChange option to prevent user from deselecting selected options.
Option groups are detected automatically and for each option group an header element is added: <optgroup label="Mathematics">...</optgroup>
Option groups and options without any group are supported simultaneously.
Using the selectedClass option to turn off the active class for selected options.
Specifiy an alternaitve label for the options: <option label="label"></option>
Make the menu drop right instead of dropping left with dropRight.
Using the data-role="multiselect" attribute for automatic wireup.
The multiselect will adopt the state of the select: <select disabled></select>.
The button will keep the tabindex of the select.
Using optgroupss with filtering and the select all option.
Boxed MultiselectThese are the Boxed Multiselect examples
Activates your content as a multiselect.
Select with preselected options: <option value="elem_3" selected>elem 3</option>
The event handler gets the selected option as first parameter and a variable saying whether the option is checked or not as second one.
Option groups are detected automatically and for each option group an header element is added
You can also deactivate option one by one by adding disabled attribute to each option you want to disable
<option value='fuu' disabled='disabled'>bar</option>
This option add a header to the multiselect box.
Adds a search bar to filter options