Bootstrap Select
The jQuery plugin that brings select elements into your website with intuitive multiselection, searching, and much more.
Bootstrap-select documentationHow 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 -->
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 |
|---|---|---|
|
|
Chart ID in the foreground, this chart will change the width depending on the position of the sliders | null |