Bootstrap Select

The jQuery plugin that brings select elements into your website with intuitive multiselection, searching, and much more.

Bootstrap-select documentation

How to use?

Add the following library Bootstrap-select stylesheet and script in your page.

Copy-paste the stylesheet <link> into your <head> to load the CSS.

<link rel="stylesheet" href="../../assets/vendor/bootstrap-select/dist/css/bootstrap-select.css">
Copy

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="../../assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
Copy

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

<script src="../../assets/js/hs.selectpicker.js"></script>
Copy

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of select picker
    $('.js-selectpicker').each(function () {
      var selectpicker = $.HSCore.components.HSSelectPicker.init($(this));
    });
  });
</script>
Copy

Basic example 

<!-- Select -->
<select class="js-selectpicker dropdown-select"
        data-hs-selectpicker-options='{
          "style": "btn-primary btn-sm"
        }'>
  <option value="one" selected>One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="four">Four</option>
</select>
<!-- End Select -->
Copy

Select boxes with optgroups 

<!-- Select -->
<select class="js-selectpicker dropdown-select"
        data-hs-selectpicker-options='{
          "style": "btn-primary btn-sm"
        }'>
  <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>
<!-- End Select -->
Copy

Custom content 

<!-- Select -->
<select class="js-selectpicker dropdown-select mb-3" title="Choose member"
        data-hs-selectpicker-options='{
          "style": "btn-primary btn-sm",
          "liveSearch": true,
          "liveSearchFieldStyle": "input-group-sm"
        }'>
  <option value="project1" data-content='
    <span class="d-flex align-items-center">
      <span class="avatar avatar-xs mr-2">
        <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
      </span>
      <span>Amanta Owens</span>
    </span>'>
    Amanta Owens
  </option>
  <option value="project2" data-content='
    <span class="d-flex align-items-center">
      <span class="avatar avatar-xs avatar-soft-success avatar-circle mr-2">
        <span class="avatar-initials">S</span>
      </span>
      <span>Sebastian Diaz</span>
    </span>'>
    Sebastian Diaz
  </option>
  <option value="project3" data-content='
    <span class="d-flex align-items-center">
      <span class="avatar avatar-xs avatar-soft-indigo rounded-circle mr-2">
        <span class="avatar-initials">E</span>
      </span>
      <span>Eliza Donovan</span>
    </span>'>
    Eliza Donovan
  </option>
  <option value="project4" data-content='
    <span class="d-flex align-items-center">
      <span class="avatar avatar-xs mr-2">
        <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
      </span>
      <span>Cameron Brown</span>
    </span>'>
    Cameron Brown
  </option>
</select>
<!-- End Select -->
Copy

SCSS

SCSS-files of the component can be found here assets/scss/front/vendor/bootstrap-select/

Extend

By assigning a variable, you can call the standard methods of the plugin:

<script>
  $(document).on('ready', function () {
    // initialization of selectpicker
    $('.js-selectpicker').each(function () {
      var selectpicker = $.HSCore.components.HSSelectPicker.init($(this));

      selectpicker.on('changed.bs.select', function () {
        console.log('Changed!!!');
      });
    });
  });
</script>
Copy

Plugin methods are called using a wrapper:

<script>
  $('.js-selectpicker').each(function () {
    var selectpicker = $.HSCore.components.HSSelectPicker.init($(this));

    $.HSCore.components.HSPWSelectPicker.methods($(this), "destroy"); // matches $(this).selectpicker("destroy");
  });
</script>
Copy

Attributes

By assigning a variable, you can call the standard methods of the plugin:

data-hs-selectpicker-options='{
   ...

   // Custom
   "liveSearchFieldStyle": "input-group-sm"
}' - array
Copy

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-selectpicker-options='{}'. For more detailed or missing attributes/functions, see the official Bootstrap-select documentation page.

Parameters Description Default value

liveSearchFieldStyle

 Chart ID in the foreground, this chart will change the width depending on the position of the sliders null