Press "Enter" to skip to content

Multiple Easy Select Combo Box with Checkboxes | MSFmultiSelect

MSFmultiSelect is an easy-to-use multi-selection library for JavaScript, and it doesn’t need jQuery. This JavaScript library converts a regular selection item into an easy-to-use multiple-select combo box.

multiselect dropdown with checkbox in html5, multiple select dropdown with checkbox in html, checkbox in select option, dynamic multi select dropdown with checkbox jquery

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, how to use checkbox inside select option in html


See Demo And Download

Official Website(jagadeesanjd11): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.