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

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