Select2
Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
Select2 documentationStylesheet
<link href="assets/lib/select2/select2.min.css" rel="stylesheet">Javascript
<script src="assets/lib/select2/select2.min.js"></script>Basic Example
<div class="form-group">
<label for="basic-example">Select an option</label>
<select class="form-control selectpicker" id="basic-example">
<option>Select country...</option>
<option>Afghanistan</option>
<option>Albania</option>
<option>Algeria</option>
<option>American Samoa</option>
<option>Antigua and Barbuda</option>
</select>
</div>Multiple Select
<div class="form-group">
<label for="multiple-select">Select options</label>
<select class="selectpicker form-control" id="multiple-select" multiple data-options='{"placeholder":"Select your options"}'>
<option>Afghanistan</option>
<option>Albania</option>
<option>Algeria</option>
<option>American Samoa</option>
</select>
</div>Theming
You can update Select2 input field styling with the
theme option property. In Falcon, We are using Bootstrap4 theme style
using
Select2 Bootstrap4 Theme. You can change another theme style by passing theme property in
data-opitons attribute like as follows:
<select class="selectpicker form-control" id="multiple-select" multiple data-options='{"placeholder":"Select your options","theme":"bootstrap4"}'></select>
We integrate Select2 Bootstrap4 Theme using SCSS in
scss/plugins/_select.scss. You can also add css file from the lib directory. You can also use css file from the lib directory.
<link href="assets/lib/select2-theme/select2-bootstrap4.min.css" rel="stylesheet">
