Press "Enter" to skip to content

How do I Create Custom Single/Multi Select options in JavaScript | vanillaSelectBox

Multiselect Dropdown in JavascriptVanilla JavaScript library that turns a regular selection item into a customizable, searchable, and validates drop-down list.

How to Make Use of it:

1. To get began, embrace the JavaScript vanillaSelectBox.js and stylesheet vanillaSelectBox.css on the web page.

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

2. Call the perform vanillaSelectField on the HTML choose and achieved.

<!-- single select -->
<select id="example">
  ... options right here ...
</select>

<!-- a number of select -->
<select id="example" multiple size="3">
  ... options right here ...
</select>
let mySelect = new vanillaSelectBox("#example");

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

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

4. Enable the person to filter by way of choices through a search area.

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

5. Customize the placeholder textual content.

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

6. Localize the dropdown listing.

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

7. Make the multi-select keep open.

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

8. Enable/disable the dropdown listing.

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

9. Select a particular choice.

// single select
mySelect.setValue(option1);

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

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

10. Clear the selection.

mySelect.empty();

11. Destroy the library.

mySelect.destroy();

Single/Multi Select In Pure JavaScript, Multiple Select Dropdown jQuery, vanilla Select Box Plugin/Github

Changelog:

08/11/2020

  • Fixed scrolling subject when the chosen field is open

v0.30 (12/14/2019)

  • The menu stops shifting round on window resize and scroll + z-index so as of creation for a number of situations

v0.26 (12/08/2019)

  • Corrected bug in stayOpen mode with disable() perform

v0.25 (11/13/2019)

  • New choice stayOpen, and the dropbox is not a dropbox however a pleasant multi-select

v0.24 (10/01/2019)

  • a corrected bug affecting choices with multiple class

See Demo And Download

Official Website(PhilippeMarcMeyer): Click Here

This superior jQuery/javascript plugin is developed by PhilippeMarcMeyer. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.