Custom Single/Multi Select In Pure JavaScript – vanillaSelectBox

Category: Form , Javascript | February 5, 2022
Views Total:6,004 views
Official Page:Go to website
Last Update:February 5, 2022


Custom Single/Multi Select In Pure JavaScript – vanillaSelectBox


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 ...
<!-- multiple select -->
<select id="example" multiple size="3">
  ... options here ...
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.


12. Select a specific option.

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

13. Clear the selection.


14. Destroy the library.


15. Enable/disable elements

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



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


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


  • v0.76: JS update


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


  • JS Bugfix


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


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


  • v0.62: added maxOptionWidth option


  • v0.61: added maxSelect option


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


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


  • Update vanillaSelectBox.js


  • Replaced display with visibility for performance


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


  • 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


  • 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


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


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


  • JS updated


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


  • Fixed scrolling issue when the select box is open


  • 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

You Might Be Interested In:

11 thoughts on “Custom Single/Multi Select In Pure JavaScript – vanillaSelectBox

  1. Ali Raza

    To get value for single select:

    To get values for multi select:

  2. siupud

    Good job: How to insert image before or after tillte of each selection?

    1. AppleHead 1984

      How to Disable the selection of one item at a time or multiple items with a set of items while still displaying these option without them remaining selectable

      Hello is there a way to disable the “selectivity” of an option while still displaying it.
      My use case involves historic information via the db that show a client that they can’t select an item because they have previously “made use or fulfilled that option” and hence don’t need to repeat it.
      However the persistent visibility of an item is a clear reminder of their account state.
      Is there a specific syntax within the current functionality and it is just a matter of specifying this combination or would this require changes to the code.

      Your help would be greatly appreciated.
      Thank You!

  3. Maayan

    Hello, how can I force attribute to be required? I tried adding the ‘required’ on the select but it doesn’t work.
    thank you for your help!

  4. Master

    Hi, how can I disable printing the selected value in the dropdown button?

  5. Andrew

    Nice job. Is there an option to choose how many selected values are listed before it switches to an item count?

    1. Michal Najvárek

      the “size” parameter specifies this number (size =”3″)

  6. Andrew

    If you choose the option “stayOpen: true”, is there any way to make box wider (to fill the parent container width) so that the summary is readable rather than going over lots of lines?


Leave a Reply