msfmultiselect

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.

• appendTo : give element selector string, it uses to target place to create multiselect.
• width : It is control of the mulitiselect width.
• height : It is control of the mulitiselect height.
• className : if you need any custom style, give css class name, it will apply to mulitiselect.
• onChange : When multiselect is changed this callback function will run. In this function, there are three parameters.
  • checked : you receive boolean data, selected item checked, or unchecked.
  • value : You get selected item value.
  • instance : It's instance variable of mulitiselect, you can access multiselect properties and methods
• selectAll : If your given value is true, then the select-all feature is will enable. It helps one click to select all options
• afterSelectAll : When users click the select-all feature this callback function will run. In this function, there are three parameters.
  • checked : you receive boolean data, selected item checked, or unchecked.
  • values : You get selected item values in array.
  • instance : It's instance variable of mulitiselect, you can access multiselect properties and methods
• searchBox : If your given value is true, the search box feature is will enable. It helps to search the option values.
• theme : There are two themes available. They are theme1 and theme2. theme1 is a regular multi-select, theme2 multi-select have directly remove selected value option button.
• autoHide : If your given value is false, selectable values always displayed on the screen.

MSFmultiSelect Methods

MSFmultiSelect.setValue(sellectedValues, changeTrigger)

This method is used to add selected values, this method needs two arguments, sellectedValues argument value has select option values in an array format. If you changeTrigger argument value is true then it triggers to onChange event.

• code : select.setValue(['4','8']); //give select option values in array

MSFmultiSelect.removeValue(removeSellectedValues, changeTrigger)

This method is used to remove selected values, this method needs two arguments, removeSellectedValues argument value has select option values in an array format. If you changeTrigger argument value is true then it triggers to onChange event.

• code : select.removeValue(['4','8']); //give select option values in array

MSFmultiSelect.getData()

This methods use to get selected values of mulitiselect

• code : console.log(select.getData());

MSFmultiSelect.selectAll(ctrlSwitch)

This method uses to select all option in the multiselect list or unselect all option in the list, this method needs one argument and its boolean value, if give true, select all option in multiselect list or you give false value unselect all in multiselect list.

• code : select.selectAll(true); select.selectAll(false);

MSFmultiSelect.loadSource(options)

This method uses to load options in multiselect. This method needs one argument and its need array format.

• formet :

  var options = [
      {caption:'optiontext1', value:'optionvalue1', selected:true},
      {caption:'optiontext2', value:'optionvalue2', selected:false}
  ];

MSFmultiSelect.getSource()

This method uses to get current source data, it will return the array format.

• code : console.log(select.getSource());

MSFmultiSelect.reload()

This use to recreate the mulitselect.

• code : select.reload();

Learn more about in minisuperfiles.blogspot.com