SelectsPRO

A feature rich and styleful select input. Powered by bootstrap-select.

Optional plugin

As this plugin is a non-Bootstrap JavaScript plugin, it should be considered as an optional extension and be removed when not in use, in order to improve page load times. Instructions on how to deal with plugins can be found here.

Create selects by adding .selectpicker to a <select> element. Various options are available, such as optgroups, multiple, and more.


<div class="form-group">
	<label>Standard select with optgroups</label>
	<select class="selectpicker">
		<optgroup label="Picnic">
			<option>Mustard</option>
			<option>Ketchup</option>
			<option>Relish</option>
		</optgroup>
		<optgroup label="Camping">
			<option>Tent</option>
			<option>Flashlight</option>
			<option>Toilet Paper</option>
		</optgroup>
	</select>
</div>

<div class="form-group">
	<label>Select with multiple options and a custom title</label>
	<select class="selectpicker" multiple data-actions-box="true" title="Select option">
		<optgroup label="Picnic">
			<option>Mustard</option>
			<option>Ketchup</option>
			<option>Relish</option>
		</optgroup>
		<optgroup label="Camping">
			<option>Tent</option>
			<option>Flashlight</option>
			<option>Toilet Paper</option>
		</optgroup>
	</select>
</div>

The styling option of the plugin does not work in order to fit in with the rest of the input elements. The primary color of the pallette is used as main color for the select element.

Customizing selects

Many customizations are available, such as multiple, optgroups, search, custom title and more. You may find examples of how to use these on the bootstrap-select documentation.

JavaScript behavior

Selects are initialized by default, but they are refreshed in order to make sure they render properly. This is done using the following function:


$('.selectpicker').selectpicker('render');

Options, methods & events

For the full list of options, methods and events related to this plugin, visit the bootstrap-select documentation.