MSFmultiSelect

MSFmultiSelect (multiselect) is a pure JavaScript user-friendly multiselect library, don't need jQuery. It's very easy to use for developers and fast.

Documentation (Demo) | Try it (JSFiddle) | Download

Installation

Use npm to install the latest version.

npm i msfmultiselect

Import MSFmultiSelect and its stylesheet.

import MSFmultiSelect from "msfmultiselect";
import 'msfmultiselect/msfmultiselect.min.css';

Alternatively, you can simply embed it in your HTML file.

<script src="https://cdn.jsdelivr.net/gh/minisuperfiles/MSFmultiSelect/msfmultiselect.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/minisuperfiles/MSFmultiSelect/msfmultiselect.min.css" rel="stylesheet"/>

Using Example

Add references to MSFmultiSelect’s JavaScript and Stylesheet.

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

Select box container element.

<div id="myselect">
  <select id="multiselect" name="languages[]" multiple="multiple">
    <option value="1" selected>HTML</option>
    <option value="2" selected>CSS</option>
    <option value="3">MySql</option>
    <option value="4">XML</option>
    <option value="5">JSON</option>
    <option value="6">YAML</option>
    <option value="7">MongoDB</option>
    <option value="8">SQLite</option>
  </select>
</div>

JavaScript code

var select = new MSFmultiSelect(
  document.querySelector('#multiselect'),
  {
    selectAll: true,
    searchBox: true,
    onChange:function(checked, value, instance) {
      console.log(checked, value, instance);
    }
  }
);

Syntax (arguments)

new MSFmultiSelect(element)
new MSFmultiSelect(element, settings)

element = document.getElementById('multiselect')
settings = {
  width: 350,
  height: 40,
  className: 'myclass',
  onChange: function(checked, value, instance) {
    console.log(checked, value, instance);
  },
  selectAll: true,
  searchBox: true,
  appendTo: '#myselect',
  readOnly: true,
  afterSelectAll: function(checked, values, instance) {
    console.log(checked, values, instance);
  },
  autoHide: false
}

element

Give DOM select element, this element posted in your backend.

settings (Optional)

Give the object of settings your multiselect.

Learn more about in minisuperfiles.blogspot.com