Create Beautiful, Functional, and Extensive Multi-Selection Fields Using Pure JavaScript | script is back at, rewritten in vanilla javascript, and ready to beautify and expand HTML <select> fields … again! Add a search bar, multi-selection utilities (like select all or no buttons), deselect in individual-specific fields, perfect design, and many more easy-to-use functions for your web application.

This library has been seized and there is a version 0.6 in the works. It is a great library worth living on.


  • Do you really like my and want to support me and all my projects?
  • Then I would be very grateful for a coffee! (Thanks to all the supporters)


  • Beautiful. 5 different designs in many color schemes …
  • Extensive.
    • Search bar to find options quickly …
    • All / None buttons …
    • Options to add, edit, delete and modify at any time …
    • Deselecting single selected fields …
    • … and way more …
  • Configurable. 36 settings and 3 linkable events …
  • Translatable. Already available in 10 languages ​​…
  • Zero Dependencies. And written in vanilla JavaScript …
  • Free/To/Use. Because it’s licensed by the Massachusetts Institute of Technology <3

custom multiple select, multiselect, jquery multiple select plugin, multiselect dropdown, multiple select jquery, fancy multiple select

How to make use of it:

1. Install & download.

$ npm install --save

2. Import the’s JavaScript and Stylesheet.

<!-- Default Themes -->
<link rel="stylesheet" href="css/default/" />
<link rel="stylesheet" href="css/default/" />
<link rel="stylesheet" href="css/default/" />
<link rel="stylesheet" href="css/default/" />
<!-- Modern Themes -->
<link rel="stylesheet" href="css/modern/" />
<link rel="stylesheet" href="css/modern/" />
<link rel="stylesheet" href="css/modern/" />
<link rel="stylesheet" href="css/modern/" />
<!-- Bootstrap themes -->
<link rel="stylesheet" href="css/bootstrap4/" />
<link rel="stylesheet" href="css/bootstrap3/" />
<link rel="stylesheet" href="css/bootstrap2/" />
<!-- Core JavaScript -->
<script src="js/"></script>
<!-- Languages -->
<script src="langs/"></script>
<script src="langs/"></script>
<script src="langs/"></script>
<script src="langs/"></script>
<script src="langs/"></script>
<script src="langs/"></script>
<script src="langs/"></script>
<script src="langs/"></script>
<script src="langs/"></script>

3. Initialize the on a current select box.

<select id="example" class="example" multiple>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>

4. Config the bypassing the options object because of the second parameter to the select function."select",{

  // width/heigh of the select
  width: null,
  height: 350,

  // CSS classes of the select
  classNames: null,

  // custom placeholder
  placeholder: null,

  // allows to deselect options or not
  deselect: false,

  // sets the 'disabled' attribute of the respective instance and gets overwritten by the source select element during the initialization
  disabled: false,

  // enables animations
  animate: false,

  // determines where to place the select
  openAbove: null,

  // stays open
  stayOpen: false,

  // opens the select on init
  startOpen: false,

  // enables multiple selection
  multiple: false,

  // maximum number of options allowed to select
  multiLimit: Infinity,

  // pins selected options on the top of the dropdown list.
  multiPinSelected: false, 

  // shows a counter
  multiShowCount: true,

  // shows the number of selectable options next to the counter number
  multiShowLimit: false,   

  // allows you to move selected options to another element
  multiContainer:     false,

  // shows "Select All" / "Unselect All" buttons
  multiSelectAll: false,

  // shows "All" / "None" buttons on each Optgroup
  multiSelectGroup: true,

  // enables descriptions for options
  descriptions: false,

  // additonal options
  items: {},

  // set / change the localization / language
  locale: "en",

  linguisticRules: {
    "е": "ё",
    "a": "ä",
    "o": "ö",
    "u": "ü",
    "ss": "ß"

  // 'ASC', 'DESC', or custom function
  sortItems: false,

  // 'ASC', 'DESC', or custom function
  sortGroups: false,

  // set an event listener to the source select element
  sourceBind: false,

  // set the display: none styling, to the source select element.
  sourceHide: true, 

  // enables live search
  search: false,

  searcgConfig: [
    "text", "value"

  // auto sets the focus
  searchFocus: true,

  // highlights matched options
  searchMarked: true,

  searchMinLength: 1,  

  // allows to exclude disabled options on the search
  searchDisabled: true,

  // hide options
  hideSelect: true,

  // hides selected options
  hideSelected: false,

  // hides disabled options
  hideDisabled: false,

  // sets an event listener to the source select element
  bindSourceSelect:   false,

  // enables CSV output
  csvOutput: false,
  csvSeparator: ","

  // function(item , group , search <string|false>){}
  cbLoopItem: undefined,

  // function(label , search <string|false>){}
  cbLoopGroup: undefined,

  // gets fired every time when the .init() process of the instance has been finished / reached the end
  cbComplete: undefined,

  // gets fired every time when the Dropdown List gets rendered with no single option
  cbEmpty: undefined

5. API strategies.

// opens the dropdown <undefined|false>);

// closes the dropdown
instance.close(animate <undefined|false>);

// toggles the dropdown
instance.toggle(animate <undefined|false>);

// enables the dropdown
instance.enable(animate <undefined|false>);

// disables the dropdown
instance.disable(animate <undefined|false>);

// remove

// reload

// sets options
instance.config(config <undefined|string>, value <*>);

// event
instance.on(event <string>, callback <callback>, args <undefined|array>);

// search the select
instance.query(search, conf);

// update info

// get the respective option
instance.options.get(key, group);

// set options
instance.options.set(option, rebuild);

// add options
instance.options.add(key, value, group, selected, disabled, description, rebuild);

// move an option
instance.options.move(item, group, new_group, rebuild);

// remove an option
instance.options.remove(key, group, rebuild);

// check if the passed option has the respective state, key, group);

// change the state (first argument) on the passed option
instance.options.handle(state, key, group, _force);

// enable an option
instance.options.enable(key, group);

// disable an option
instance.options.disable(key, group);

// select an option, group);

// unselect an option
instance.options.unselect(key, group);

// toggle an option
instance.options.toggle(key, group);

// invert state

// apply the passed state to all options
instance.options.all(state, group);

// apply a state function to multiple items
instance.options.walk(state, items, args);

// search through the option and return each one
instance.options.finder(search, config);

// return the search result as object
instance.options.find(search, config);

// loop each single option of the instance
instance.options.walker(orderi, orderg);

6. Events.

instance.on('open', function(){

instance.on('close', function(){

instance.on('change', function(item, state){

Powerful Single & Multiple Select Library, Plugin/Github, autocomplete multiple select javascript, custom multi select dropdown css

See Demo And Download

Official Website(wolffe): Click Here

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

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…


Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…


A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…


First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…


Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…