Select2 selects
Selects select2.min.js
Overview

Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and pagination of results. Select2 exposes its default options via the $.fn.select2.defaults object. Properties changed in this object (same properties configurable through the constructor) will take effect for every instance created after the change. Works well in IE8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+.

Main features:

  • Enhancing native selects with search.
  • Enhancing native selects with a better multi-select interface.
  • Loading data from JavaScript: easily load items via AJAX and have them searchable.
  • Nesting optgroups: native selects only support one level of nesting. Select2 does not have this restriction.
  • Tagging: ability to add new items on the fly.
  • Working with large, remote datasets: ability to partially load a dataset based on the search term.
  • Paging of large datasets: easy support for loading more pages when the results are scrolled to the end.
  • Templating: support for custom rendering of results and selections.
Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load library -->
<script type="text/javascript" src="assets/js/plugins/forms/selects/select2.min.js"></script>

Create element:

<!-- Select2 element -->
<select class="select">
	<optgroup label="Mountain Time Zone">
		<option value="value">...</option>
		...
	</optgroup>
</select>

Then initialize via JavaScript:

// Initialization
$('select').select2({
	// options
});
Select2 documentation
Full Select2 select documentation can be found online on Official library website. It's quite big, with a lot of options, events and methods. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to Select2 library.
Plugin info
Property Description
File name select2.min.js
Location assets/js/plugins/forms/selects/
Updates 0
Links

Official plugin website

Full documentation

Github project page
Bootstrap multiselect
Selects bootstrap_multiselect.min.js
Overview

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 w dropdown menu containing the single options as checkboxes.

Usage

First include jQuery and Bootstrap libraries, then include the following lines of code in the <head> section of your HTML:

<!-- Load library -->
<script type="text/javascript" src="assets/js/plugins/forms/selects/bootstrap_multiselect.js"></script>

Now simply use HTML to create your select input which you want to turn into a multiselect. Remember to set the multiple attribute as to get a real multiselect - but do not worry, the plugin can also be used as usual select without the multiple attribute being present:

<!-- Build your select -->
<select id="example-getting-started" 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>

In the end, simply call the plugin on your select. You may also specify further options, see the Options tab for further information:

// Initialization
$(document).ready(function() {
    $('#example-getting-started').multiselect();
});
Configuration options
Option Description
multiple multiple is not a real configuration option. It refers to the multiple attribute of the select the plugin is applied on. When the multiple attribute of the select is present, the plugin uses checkboxes to allow multiple selections. If it is not present, the plugin uses radio buttons to allow single selections. When using the plugin for single selections (without the multiple attribute present), the first option will automatically be selected if no other option is selected in advance
enableHTML XSS injection is a serious thread for all modern web applications. Setting enableHTML to false (default setting) will create a XSS save multiselect
enableClickableOptGroups If set to true, optgroup's will be clickable, allowing to easily select multiple options belonging to the same group
disableIfEmpty If set to true, the multiselect will be disabled if no options are given
dropRight The dropdown can also be dropped right
maxHeight The maximum height of the dropdown. This is useful when using the plugin with plenty of options
checkboxName The name used for the generated checkboxes
buttonClass The class of the multiselect button
inheritClass Inherit the class of the button from the original select
buttonContainer The container holding both the button as well as the dropdown
buttonWidth The width of the multiselect button may be fixed using this option
buttonText A callback specifying the text shown on the button dependent on the currently selected options.
The callback gets the currently selected options and the select as argument and returns the string shown as button text. The default buttonText callback returns nonSelectedText in the case no option is selected, nSelectedText in the case more than numberDisplayed options are selected and the names of the selected options if less than numberDisplayed options are selected
buttonTitle A callback specifying the title of the button.
The callback gets the currently selected options and the select as argument and returns the title of the button as string. The default buttonTitle callback returns nonSelectedText in the case no option is selected and the names of the selected options of less than numberDisplayed options are selected. If more than numberDisplayed options are selected, nSelectedText is returned
nonSelectedText The text displayed when no option is selected. This option is used in the default buttonText and buttonTitle functions
nSelectedText The text displayed if more than numberDisplayed options are selected. This option is used by the default buttonText and buttonTitle callbacks
allSelectedText The text displayed if all options are selected
numberDisplayed This option is used by the buttonText and buttonTitle functions to determine of too much options would be displayed
optionLabel A callback used to define the labels of the options
selectedClass The class(es) applied on selected options
includeSelectAllOption Set to true or false to enable or disable the select all option
selectAllText The text displayed for the select all option
selectAllValue The select all option is added as additional option within the select. To distinguish this option from the original options the value used for the select all option can be configured using the selectAllValue option
selectAllName This option allows to control the name given to the select all option
selectAllNumber If set to true (default), the number of selected options will be shown in parantheses when all options are seleted
onSelectAll This function is triggered when the select all option is used to select all options. Note that this can also be triggered manually using the .multiselect('selectAll') method
enableFiltering Set to true or false to enable or disable the filter. A filter input will be added to dynamically filter all options
enableCaseInsensitiveFiltering The filter as configured above will use case sensitive filtering, by setting enableCaseInsensitiveFiltering to true this behavior can be changed to use case insensitive filtering
filterBehavior The options are filtered based on their text. This behavior can be changed to use the value of the options or both the text and the value
filterPlaceholder The placeholder used for the filter input
onChange A function which is triggered on the change event of the options. Note that the event is not triggered when selecting or deselecting options using the select and deselect methods provided by the plugin
onDropdownShow A callback called when the dropdown is shown
onDropdownHide A callback called when the dropdown is closed
onDropdownShown A callback called after the dropdown has been shown
onDropdownHidden A callback called after the dropdown has been closed
Plugin methods
Option Description
.multiselect('destroy') This method is used to destroy the plugin on the given element - meaning unbinding the plugin
.multiselect('refresh') This method is used to refresh the checked checkboxes based on the currently selected options within the select
.multiselect('rebuild') Rebuilds the whole dropdown menu. All selected options will remain selected (if still existent!)
.multiselect('select', value) Selects an option by its value. Works also using an array of values
.multiselect('deselect', value) Deselect an option by its value. Works also using an array of values
.multiselect('selectAll', justVisible) Selects all options. If justVisible is set to true or not provided, all visible options are selected (when using the filter), otherweise (justVisible set to false) all options are selected
.multiselect('deselectAll', justVisible) Deselects all options. If justVisible is set to true or not provided, all visible options are deselected, otherweise (justVisible set to false) all options are deselected
.multiselect('updateButtonText') When manually selecting/deselecting options and the corresponding checkboxes, this function updates the text and title of the button
.multiselect('setOptions', options) Used to change configuration after initializing the multiselect. This may be useful in combination with .multiselect('rebuild')
.multiselect('disable') Disable both the underlying select and the dropdown button
.multiselect('enable') Enable both the underlying select and the dropdown button
.multiselect('dataprovider', data) This method is used to provide options programmatically
.multiselect('setAllSelectedText', value) This method is used to programmatically provide a new text to display in the button when all options are selected, at runtime
Templates

The generated HTML markup can be controlled using templates. Basically, templates are simple configuration options. The default templates are shown below:

// Default templates
$(document).ready(function() {
    $('#example').multiselect({
        templates: {
            button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"></button>',
            ul: '<ul class="multiselect-container dropdown-menu"></ul>',
            filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
            filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button></span>',
            li: '<li><a href="javascript:void(0);"><label></label></a></li>',
            divider: '<li class="multiselect-item divider"></li>',
            liGroup: '<li class="multiselect-item group"><label class="multiselect-group"></label></li>'
        }
    });
});
Plugin info
Property Description
File name bootstrap_multiselect.min.js
Location assets/js/plugins/forms/selects/
Updates 0
Links

Official plugin website

Github project page
Bootstrap select
Selects bootstrap_select.min.js
Overview
A custom select / multiselect for Bootstrap using button dropdown, designed to behave like regular Bootstrap selects.
Usage

First include jQuery and Bootstrap libraries, then include the following lines of code in the <head> section of your HTML:

<!-- Load library -->
<script type="text/javascript" src="assets/js/plugins/forms/selects/bootstrap_select.min.js"></script>

Create your <select> with the .selectpicker class:

<!-- Select element -->
<select class="selectpicker">
	<option>Mustard</option>
	<option>Ketchup</option>
	<option>Barbecue</option>
</select>

You don't need to do anything else, as the data-api automatically picks up the <select>s with the selectpicker class. Alternatively you can initialize plugin via JavaScript:

// Initialization
$('#selector').selectpicker();
	// options
});
Plugin options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-style="".

Name Default Description
container false Appends the select to a specific element or selector, e.g., container: 'body' | '.main-body'
countSelectedText '{0} of {1} selected' Sets the format for the text displayed when selectedTextFormat is count or count > #. {0} is the selected amount. {1} is total available for selection.
dropupAuto true Checks to see which has more room, above or below. If the dropup has enough room to fully open normally, but there is more room above, the dropup still opens normally. Otherwise, it becomes a dropup. If dropupAuto is set to false, dropups must be called manually.
header false Adds a header to the top of the menu; includes a close button by default
hideDisabled false Removes disabled options and optgroups from the menu data-hide-disabled: true
mobile false Enables the device's native menu for select menus
selectedTextFormat null Specifies how the selection is displayed with a multiple select
size 'auto' When set to 'auto', the menu always opens up to show as many items as the window will allow without being cut off. Set to false to always show all items
showSubtext false Subtext associated with a selected option will be displayed in the button data-show-subtext: true
showIcon true Display icon(s) associated with selected option(s) in the button. If false, icons will not be displayed in the button.
showContent true Display custom HTML associated with selected option(s) in the button. If false, the option value will be displayed instead.
style null Apply a class to the button
title null Set the default text for bootstrap-select
width null auto automatically adjusts the width of the select to accommodate its widest option. Set the width of the select manually, e.g. 300px or 50%
maxOptions false When set and in a multi
Plugin methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-style="".

Method Description
val() You can set the selected value by calling the val method on the element
selectAll() This will select all items in a multiple select
deselectAll() This will deselect all items in a multiple select
render() You can force a re-render of the bootstrap-select ui with the render method. This is useful if you programmatically change any underlying values that affect the layout of the element
mobile() Enable mobile scrolling by calling $('.selectpicker').selectpicker('mobile'). The method for detecting the browser is left up to the user. This enables the device's native menu for select menus
setStyle() Modify the class(es) associated with either the button itself or its container
refresh() To programmatically update a select with JavaScript, first manipulate the select, then use the refresh method to update the UI to match the new state. This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript
hide() To programmatically hide the bootstrap-select use the hide method to hide it
show() To programmatically show the bootstrap-select use the show method to show it
destroy() To programmatically destroy (remove) the bootstrap-select use the destroy method to destroy it
Plugin info
Property Description
File name bootstrap_select.min.js
Location assets/js/plugins/forms/selects/
Updates 0
Links

Official plugin website

Github project page
SelectBoxIt select
Selects selectbox.min.js
Overview

SelectBoxIt allows you to replace ugly and hard to use HTML select boxes with gorgeous and feature rich drop downs. Twitter Bootstrap, jQueryUI, and jQuery Mobile themes are supported right out of the box. If you don't want to use these a library theme, then you can use the SelectBoxIt default theme, which closely resembles the Twitter Bootstrap theme. Feel free to customize the default theme to your liking.

To use SelectBoxIt, you do not have to rewrite any of your existing form validation logic or event handling. SelectBoxIt just works. SelectBoxIt also provides first-class support for mobile, tablet, and desktop browsers, triggering the native "wheel" interface for mobile and tablet devices

Usage

The plugin is jQuery and jQuery UI dependent. Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery UI -->
<script type="text/javascript" src="assets/js/core/libraries/jquery_ui/core.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/forms/selects/selectboxit.min.js"></script>

Create an HTML select box with id, class, or name attributes. If you include an id attribute, SelectBoxIt will create and copy a "unique" id attribute to the dropdown list.
If you include a class and/or name attributes, the attributes will be copied to the new dropdown list that the plugin creates (this allows you to easily interact with the new dropdown list without having to know a new id attribute).
It is also best practice for each select box option to have a value attribute, but it is not required:

<!-- Create element -->
<select id="test" name="test">
	<option value="SelectBoxIt is:">SelectBoxIt is:</option>
	<option value="a jQuery Plugin">a jQuery Plugin</option>
	<option value="a Select Box Replacement">a Select Box Replacement</option>
	<option value="a Stateful UI Widget">a Stateful UI Widget</option>
</select>

Finally call the plugin: In your JavaScript code, call the selectBoxIt() method on your HTML select box:

// Executes your code when the DOM is ready.  Acts the same as $(document).ready().
$(function() {

	// Calls the selectBoxIt method on your HTML select box.
	$("select").selectBoxIt();
});
Plugin options

The Options API allows you to customize the dropdown list by setting custom options and getting all current options.

Option Default Description
showEffect "none" The effect that opens the dropdown options list. Any of the jQueryUI show effects (i.e. "bounce")
showEffectOptions { } Advanced options to use with jQueryUI show effects. Any of the jQueryUI show effects (i.e. "bounce")
showEffectSpeed "medium" The time duration of the show effect. Any numeric number (milliseconds)
hideEffect "none" The effect that closes the dropdown options list. Any of the jQueryUI hide effects (i.e. "bounce")
hideEffectOptions { } Advanced options to use with jQueryUI hide effects
hideEffectSpeed "medium" The time duration of the hide effect. Any numeric number (milliseconds)
showFirstOption true Determines if the first dropdown list option is shown
defaultText '' Overrides the default dropdown list text to allow a user to specify custom text
defaultIcon '' Allows a user to specify a custom dropdown list icon
downArrowIcon '' Overrides the default dropdown list down arrow icon class to allow a user to specify a custom CSS class
theme "default" Allows the dropdown to be themed with Bootstrap or jQueryUI
keydownOpen true Opens the dropdown if the up or down key is pressed when the dropdown is focused
isMobile function() { return (/iPhone|iPod|iPad|Android|BlackBerry|Opera Mini|IEMobile/).test(navigator.userAgent);} The function used for mobile browser detection
copyAttributes ["title", "rel"] Allows a user to specify which HTML attributes they would like copied over to the new drop down
copyClasses "button" Allows a user to specify whether native classes should be copied to the new select button or to the container element
native false Allows you to trigger the native select box element when a user is interacting with the drop down
aggressiveChange false Aggressive Change Mode will select a drop down option (and trigger the change event on the original select box) when a user navigates to an option using the up and down arrow keys via the keyboard, or searches for an option using the keyboard
selectWhenHidden true Will allow a user to select an option using the keyboard when the drop down list is hidden and focused
viewport $(window) Constrains the dynamic positioning of the dropdown list to the dimensions of an element
similarSearch false Optimizes for lists with similar values (i.e. State list)
nativeMousdown false Mimics native firefox drop down behavior by opening the drop down on mousedown and selecting the currently hovered drop down option on mouseup
customShowHideEvent false Prevents the drop down from opening on click or mousedown, which allows a user to open/close the drop down with a custom event handler
autoWidth true Makes sure the width of the drop down is wide enough to fit all of the drop down options
html true Determines whether or not option text is rendered as html or as text
populate "" Convenience option that accepts JSON data, an array, a single object, or valid HTML string to add options to the drop down list. This option can also be a method that returns any of the accepted data formats
dynamicPositioning true Determines whether or not the drop down list should fit inside it's viewport
hideCurrent false Determines whether or not the currently selected drop down option is hidden in the list
HTML5 Data Attribute Options

These options can be set on the select box or individual options directly within the HTML code.

Option Default Description
data-icon " " Specifies the custom or jQueryUI CSS classes you want to use to show icon images for the dropdown list and/or dropdown list individual options
data-iconurl " " Specifies the absolute or relative URL of an image file
data-downarrow " " Specifies the custom or jQueryUI CSS classes you want to use to replace the default down arrow icon image
data-text " " Specifies the custom text that you want to use for the dropdown list
data-preventclose " " Allows you to specify which option selections should not close the drop down
data-selectedtext " " Allows the ability to change what is displayed in the dropdown when an item is selected
Plugin events

The Events API allows your application to listen to user events triggered on the dropdown list. All custom/default events are triggered on the original select box element (not the new dropdown list).
The original select box value attribute is also synced with the new dropdown list, so if a user selects a new value from the dropdown list, the original select box value will also be updated. This allows your existing code to continue working inside of forms.

You can catch Default Events by using the jQuery bind() or on() methods, or by using jQuery convenience methods such as click(), change(), etc. You must use the jQuery bind() or on() methods to catch Custom Events.

Event Description
Default events
focus A focus event will be triggered when a user either clicks or tabs to the dropdown list.
focusin A focusin event will be triggered when a user either clicks or tabs to the dropdown list. Focus and focusin events are closely related, but the focusin event bubbles up the DOM tree and the focus event does not bubble. If you are using a library such as Backbone.js, which uses event delegation, use the focusin event to determine when the select box element gains focus.
click A click event will be triggered when a user clicks on the dropdown list.
blur A blur event will be triggered when the dropdown list loses focus.
focusout A focusout event will be triggered when the dropdown list loses focus. Blur and focusout events are closely related, but the focusout event bubbles up the DOM tree and the blur event does not bubble. If you are using a library such as Backbone.js, which uses event delegation, use the focusout event to determine when the select box element loses focus.
change A change event will be triggered when a user selects a new dropdown list option.
mouseenter A mouseenter event will be triggered when a user’s mouse enters an element. jQuery uses both mouseenter and mouseleave to simulate a hover event.
mouseleave A mouseleave event will be triggered when a user’s mouse leaves an element. jQuery uses both mouseenter and mouseleave to simulate a hover event.
mousedown A mousedown event will be triggered when a user clicks on the drop down
mouseup A mouseup event will be triggered when a user clicks on the drop down
Custom events
open An open event will be triggered when a user opens the dropdown list.
close A close event will be triggered when a user closes the dropdown list.
moveDown A moveDown event will be triggered when a user presses the down arrow key to select a dropdown list option directly beneath the currently selected option.
moveUp A moveUp event will be triggered when a user presses the up arrow key to select a dropdown list option directly above the currently selected option.
search A search event will be triggered when a user does a text search that matches a dropdown list option. Keep in mind that this event will be fired only when a search match is found.
enter An enter event will be triggered when a user presses the enter key while the dropdown list is focused.
tab-focus A tab-focus event will be triggered when a user presses the tab key to focus the dropdown list.
tab-blur A tab-blur event will be triggered when a user presses the tab key to blur the dropdown list.
option-click An option-click event will be triggered when a user clicks a dropdown list option.
backspace A backspace event will be triggered when a user presses the backspace key while the dropdown list is focused.
disable A disable event will be triggered if a dropdown list is disabled.
disable-option A disable-option event will be triggered if a single dropdown list option is disabled.
enable An enable event will be triggered if a dropdown list becomes enabled, or in other words, no longer disabled.
enable-option A enable-option event will be triggered if a single dropdown list option is disabled.
destroy A destroy event will be triggered if a dropdown list is destroyed
create A create event will be triggered if a dropdown list is created.
changed A changed event will be triggered after the original select box change event is fired and the dropdown text is changed.
refresh A refresh event will be triggered after the refresh method is called to recreate the SelectBoxIt dropdown.
Plugin info
Property Description
File name selectbox.min.js
Location assets/js/plugins/forms/selects/
Updates 0
Links

Official plugin website

Full documentation

Github project page