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