Custom Single/Multi Select In Pure JavaScript – vanillaSelectBox

Category: Form , Javascript | December 16, 2019
Author: PhilippeMarcMeyer
Views Total: 395
Official Page: Go to website
Last Update: December 16, 2019
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
});

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();

Changelog:

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:


2 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

Leave a Reply