A Multi-Select Component In Pure JS | Iconic Multiselect

Iconic Multiselect is a multi-selection component written in pure JavaScript – also compatible with IE11. Easy-to-use, easy-to-configure, multi-browser selection components based on Vanilla JavaScript. Works with native HTML checkbox.

vanilla js multi select dropdown, javascript multiselect dropdown with checkbox, jquery multiselect dropdown with search, multiselect dropdown with checkbox jquery plugin

How to make use of it:

1. Insert the Iconic Multiselect’s JavaScript into the doc.

<!-- With IE 11 Polyfills -->
<script src="multi-select-ie11-polyfills.min.js"></script>
<!-- Without IE 11 Polyfills -->
<script src="multi-select.min.js"></script>

2. Create a brand new occasion of the Iconic Multiselect.

<select id="example">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
var multiSelect = new IconicMultiSelect({
    select: "#example",

3. Initialize the Iconic Multiselect and executed.


4. You may also outline the choices in an array of objects as follows:

var multiSelect = new IconicMultiSelect({
    data: [ 
      { id: 1, item: 'Option 1'}, 
      { id: 2, item: 'Option 2'}, 
      { id: 3, item: 'Option 3'}
    textField: 'item',
    valueField: 'id',

5. Available configurations.

var multiSelect = new IconicMultiSelect({
    // placeholder text
    placeholder: "Select... ",
    // message to show if no data
    noData: "No data found. ",
    // message to show if no results
    noResults: "No results found.",

6. Listen to the choice modifications.

multiSelect.subscribe(function(e) {

7. Determine whether or not to inject CSS within the <head> tag.

var multiSelect = new IconicMultiSelect({
    customCss: true,

Cross-browser Multi-Select Component, Iconic Multiselect Plugin/Github, how to select multiple options from a drop down list in javascript, custom multi select dropdown css

See Demo And Download

Official Website(sidneywm): Click Here

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