MSFmultiSelect | Multiselect | Mini Super Files

MSFmultiSelect

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

Example Code

<script src="MSFmultiSelect.js"></script>
<link rel="stylesheet" type="text/css" href="MSFmultiSelect.css"/>
<div id='myselect'>
  <select id='multiselect' name='countries[]' multiple='multiple'>
    <option value='1' selected='selected'>Iceland</option>
    <option value='2' selected='selected'>Indonesia</option>
    <option value='3' selected='selected'>India</option>
    <option value='4'>Iran</option>
    <option value='5'>Iraq</option>
    <option value='6'>Ireland</option>
    <option value='7'>Isle of Man</option>
    <option value='8'>Israel</option>
  </select>
</div>
<script>
var select = new MSFmultiSelect(
 document.querySelector('#multiselect'),
 { 
  onChange:function(checked,value,instance){
   console.log(checked,value,instance); 
  },
  selectAll:true,
  appendTo:'#myselect' 
 } 
);
</script>

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,
 appendTo:'#myselect',
 readOnly:true
}

element

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

settings (Optional)

Give the object of settings your multiselect.

1. appendTo : give element selector string, it uses to target place to create multiselect.
2. width : It is control of the mulitiselect width.
3. height : It is control of the mulitiselect height.
4. className : if you need any custom style, give css class name, it will apply to mulitiselect.
5. onChange : when it changed, this callback function, there is three-parameter in this function.
   1. checked : you receive boolean data, selected item checked, or unchecked.
   2. value : you get selected item value.
   3. instance : it's instance variable of mulitiselect, you can access multiselect properties and methods
6. selectAll : if you give true value, select all options to enable.
7. readOnly : if you give true value, the user can not modify multiselect options.

MSFmultiSelect Methods

MSFmultiSelect.setValue(sellectedValues)

This method used to add selected values, this method needs one argument, that argument value has select option values in an array format.

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

MSFmultiSelect.removeValue(removeSellectedValues)

This method used to remove selected values, this method needs one argument, that argument value has select option values in an array format.

• 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();