Custom Single/Multi Select In Pure JavaScript – vanillaSelectBox

Preview:

Description:

A Vanilla JavaScript library that transforms the regular select element into a customizable, searchable, checkable dropdown list.

How to use it:

1. To get started, include the JavaScript vanillaSelectBox.js and stylesheet vanillaSelectBox.css on the page.

<link rel="stylesheet" href="./vanillaSelectBox.css">
<script src="./vanillaSelectBox.js"></script>

2. Call the function vanillaSelectBox on the HTML select and done.

<!-- single select -->
<select id="example">
  ... options here ...
</select>
<!-- multiple select -->
<select id="example" multiple size="3">
  ... options here ...
</select>

let mySelect = new vanillaSelectBox("#example");

3. Set the max height/width of the dropdown list.

let mySelect = new vanillaSelectBox("#example",{
    maxWidth: 500,
    maxHeight: 400,
    minWidth: -1
});

4. Enable the user to filter through options via a search field. Default: false.

let mySelect = new vanillaSelectBox("#example",{
    search: true
});

Customize the placeholder text. Default: empty.

let mySelect = new vanillaSelectBox("#example",{
    placeHolder: "custom text here"
});

5. Localize the dropdown list.

let mySelect = new vanillaSelectBox("#example",{
    translations: { 
      "all": "All", 
      "item": "item",
      "items": "items", 
      "selectAll": "Select All", 
      "clearAll": "Clear All" 
    },
});

6. Make the multi-select stay open. Default: false.

let mySelect = new vanillaSelectBox("#example",{
    stayOpen: true
});

7. Determine whether to disable the Select All functionality. Default: false.

let mySelect = new vanillaSelectBox("#example",{
    disableSelectAll: true
});

8. Set the maximum number of selectable options in a multiple-choice menu. Default: 4

let mySelect = new vanillaSelectBox("#example",{
    maxSelect: 3
});

9. Set the max width (in px) of each option.

let mySelect = new vanillaSelectBox("#example",{
    maxOptionWidth: 80
});

10. Change the default “,” item separator showing in the button.

let mySelect = new vanillaSelectBox("#example",{
    itemsSeparator: ","
});

11. Enable/disable the dropdown list.

mySelect.enable();
mySelect.disable();

12. Select a specific option.

// single select
mySelect.setValue(option1);
// multiple select
mySelect.setValue([option1, option2, option3, ...]);
// select all
mySelect.setValue('all');

13. Clear the selection.

mySelect.empty();

14. Destroy the library.

mySelect.destroy();

15. Enable/disable elements

mySelect.enableItems([] || '') => array of values or comma delimited list
mySelect.disableItems([] || '') => array of values or comma delimited list

Changelog:

02/05/2022

• Bugfix

02/05/2022

• v1.0.2: new options : button item separator and singular item

10/19/2021

• v0.78: Stop using inline styles in the main button

09/25/2021

• v0.76: JS update

06/22/2021

• v0.75: Remote search ready + local search modification : when a check on optgroup checks children only if they not excluded from search.

06/22/2021

• JS Bugfix

06/11/2021

• v0.64: Two levels: groups are now checkable to check/uncheck the children options

06/08/2021

• v0.63: Two levels: one click on the group selects / unselects children

06/06/2021

• v0.62: added maxOptionWidth option

06/05/2021

• v0.61: added maxSelect option

06/02/2021

• v0.60: two levels support (optgroups are now used to show two level dropdowns)

05/09/2021

• v0.59: fixing search box overlapping first item in single selects

02/11/2021

• Update vanillaSelectBox.js

02/05/2021

• Replaced display with visibility for performance

02/02/2021

• Fixed minWidth option was set only if maxWidth was and this could

12/16/2020

• v0.57: Added an input of type hidden with a name attribute equal to the select id which holds the selected options delimited by commas

11/23/2020

• v0.56 : The multiselect checkboxes are a little smaller, maxWidth option is now working + added minWidth option as well. The button has now a style attribute to protect its appearance

11/21/2020

• All attributes from the original select options are copied to the selectBox element.

11/09/2020

• v0.53: if all the options of the select are selected then the check all checkbox is checked

11/08/2020

• JS updated

08/30/2020

• adding a select all/clear all check button + optgroup support

08/11/2020

• Fixed scrolling issue when the select box is open

12/16/2019

• Bugfixed

v0.30 (12/14/2019)

• The menu stops moving around on window resize and scroll + z-index in order of creation for multiple instances

v0.26 (12/08/2019)

• Corrected bug in stayOpen mode with disable() function

v0.25 (11/13/2019)

• New option stayOpen, and the dropbox is no longer a dropbox but a nice multi-select

v0.24 (10/01/2019)

• corrected bug affecting options with more than one class