Select Pro Component
Bootstrap Select is a form control that displays a collapsable list of multiple values.
Usage
Bootstrap Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. Keep reading our Bootstrap Select examples and learn how to use this plugin.
CSS
In order to use this plugin on your page you will need to include the following styles in the “Page plugins” area from the page’s head section:
<link rel="stylesheet" href="assets/vendor/select2/dist/css/select2.min.css">
JS
In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:
<script src="assets/vendor/select2/dist/js/select2.min.js"></script>
Initialization
Table
Add data-toggle="select” on any div in order to activate the sorting functionality.
Example
<form>
<select class="form-control" data-toggle="select" title="Simple select" data-live-search="true" data-live-search-placeholder="Search ...">
<option>Alerts</option>
<option>Badges</option>
<option>Buttons</option>
<option>Cards</option>
<option>Forms</option>
<option>Modals</option>
</select>
</form>
Placeholder
<form>
<select class="form-control" data-toggle="select" title="Simple select" data-placeholder="Select a state">
<option>Alerts</option>
<option>Badges</option>
<option>Buttons</option>
<option>Cards</option>
<option>Forms</option>
<option>Modals</option>
</select>
</form>
Disabled select
<form>
<select class="form-control" data-toggle="select" data-placeholder="Disabled select" disabled>
<option>Alerts</option>
<option>Badges</option>
<option>Buttons</option>
<option>Cards</option>
<option>Forms</option>
<option>Modals</option>
</select>
</form>
Disabled results
<form>
<select class="form-control" data-toggle="select" data-placeholder="Disabled results">
<option>Alerts</option>
<option>Badges</option>
<option disabled>Buttons</option>
<option>Cards</option>
<option disabled>Forms</option>
<option>Modals</option>
</select>
</form>
Hide search box
<form>
<select class="form-control" data-toggle="select" data-minimum-results-for-search="Infinity">
<option>Alerts</option>
<option>Badges</option>
<option>Buttons</option>
<option>Cards</option>
<option>Forms</option>
<option>Modals</option>
</select>
</form>
Multiple
<form>
<select class="form-control" data-toggle="select" multiple data-placeholder="Select multiple options">
<option>Alerts</option>
<option>Badges</option>
<option>Buttons</option>
<option>Cards</option>
<option>Forms</option>
<option>Modals</option>
</select>
</form>