Bootstrap Select
The jQuery plugin that brings select elements into your website with intuitive multiselection, searching, and much more.
Official documentation
For more detailed information and examples, see the official documentation: Bootstrap-select .
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 -->
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 |