Custom Single/Multi Select In Pure JavaScript – vanillaSelectBox

Category: Form , Javascript | October 19, 2021
Author:PhilippeMarcMeyer
Views Total:1,630 views
Official Page:Go to website
Last Update:October 19, 2021
License:MIT

Preview:

Custom Single/Multi Select In Pure JavaScript – vanillaSelectBox

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", 
      "items": "items" 
    }
});

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. Enable/disable the dropdown list.

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

11. Select a specific option.

// single select
mySelect.setValue(option1);

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

// select all
mySelect.setValue('all');

12. Clear the selection.

mySelect.empty();

13. Destroy the library.

mySelect.destroy();

14. Enable/disable elements

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

Changelog:

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

You Might Be Interested In:


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

  1. Ali Raza

    To get value for single select:
    document.getElementById(‘idofselect’).value;

    To get values for multi select:
    (getValues(‘idofselect’)).join(‘,’);

    Reply
  2. siupud

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

    Reply
    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!

      Reply
  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!

    Reply
  4. Master

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

    Reply
  5. Andrew

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

    Reply

Leave a Reply