How to use
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="../node_modules/select2/dist/css/select2.min.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../node_modules/select2/dist/js/select2.full.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script href="../assets/js/hs.select2.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 select2
$('.js-select2-custom').each(function () {
var select2 = $.HSCore.components.HSSelect2.init($(this));
});
});
</script>
Basic example
Placeholder
Custom width
Use dropdownAutoWidth and width props.
Use "dropdownWidth": "" for a custom width.
Responsive alignment
To align right the dropdown menu with the given breakpoint or larger, add .select2-custom{-sm|-md|-lg|-xl}-right.
Search
Search placeholder
Use searchInputPlaceholder
Multiple
Single multiple
Optgroup
Use <optgroup> tag
With append and prepend
Custom placeholder
Custom tags
Dynamic option creation
Disabled
Modal example
Methods
| Parameters | Description | Default value |
|---|---|---|
customClass |
Class for select field. | .custom-select |
width |
Width of input. | 100% |
dropdownWidth |
Set width for dropdown menu. | null |
searchInputPlaceholder |
Placeholder for serach input inside container. | false |
multiplePlaceholder |
Text neasted input with tags for multiple select. | false |
singleMultiple |
Placeholder for serach input inside container. | false |
singleMultiplePostfix |
Postfix for singleMultiple mode in placeholder when item is selected. |
" item(s) selected" |
singleMultiplePrefix |
Prefix for singleMultiple mode in placeholder when item is selected. |
null |
singleMultipleActiveClass |
Active class for .select2-selection when item selected if single-multiple mode is true. |
active |