Multiple Easy Select Combo Box with Checkboxes | MSFmultiSelect

How to make use of it:

1. Add references to MSFmultiSelect’s JavaScript and Stylesheet.

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

2. Wrap your choose field into a container component.

<script src="msfmultiselect.min.js"></script>
<link rel="stylesheet" type="text/css" href="msfmultiselect.min.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>

3. Initialize the library on the highest container and complete.

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      appendTo: '#example',
      // options here
    }
);

4. Determine whether or not to allow the Check All functionality.

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      selectAll: true
    }
);

5. Specify the height/width of the multi-select combo box.

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      width:350,
      height:30
    }
);

6. Add further CSS classes to the multi-select combo box.

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      className: ''
    }
);

7. Determine whether or not to allow the ReadOnly mode.

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      readOnly: true
    }
);

8. Execute a function when the options are modified.

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

9. Determine whether or not to allow the Live Search functionality.

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      searchBox: true
    }
);

10. Determine the theme you’d like to make use of.

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      theme: 'theme1' // or 'theme2'
    }
);

11. Possible API strategies to regulate the multi-select combo box programmatically.

// set/remove value
mySelect.setValue(['4','8']);
mySelect.removeValue(['4','8']);

// get selected values
mySelect.getData();

// get an array of the current data
mySelect.getSource();

// select all values
mySelect.selectAll(true/false);

// load more options
mySelect.loadSource([
  {caption:'Option 1',value:'value1',selected:true},
  {caption:'Option 2',value:'value2',selected:false},
]);

// reload the instance
mySelect.reload();

Easy Multiselect Combo Box With Checkboxes, MSFmultiSelect Plugin/Github

See Demo And Download