Custom Single/Multi Select In Pure JavaScript – vanillaSelectBox

Category: Form , Javascript | August 30, 2020
Author:PhilippeMarcMeyer
Views Total:2,096 views
Official Page:Go to website
Last Update:August 30, 2020
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");

Set the max height/width of the dropdown list.

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

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

Localize the dropdown list.

let mySelect = new vanillaSelectBox("#example",{
    translations: { 
      "all": "All", 
      "items": "items" 
    }
});

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

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

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

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

Enable/disable the dropdown list.

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

Select a specific option.

// single select
mySelect.setValue(option1);

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

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

Clear the selection.

mySelect.empty();

Destroy the library.

mySelect.destroy();

Enable/disable elements

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

Changelog:

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:


5 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

Leave a Reply