snitchbot | Dashboard & Remote Field Sensing

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 documentation

Stylesheet

<link href="assets/lib/select2/select2.min.css" rel="stylesheet">

Javascript

<script src="assets/lib/select2/select2.min.js"></script>

Basic Example

Select an option

<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

Select options

<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">