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

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

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

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

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>
              
            

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>
              
            

Attributes

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

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

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

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