Author: | jagadeesanjd11 |
---|---|
Views Total: | 433 views |
Official Page: | Go to website |
Last Update: | December 10, 2020 |
License: | MIT |
Preview:

Description:
The MSFmultiSelect JavaScript library converts the regular select element into an advanced user-friendly multiselect combo box.
Click on the box to select multiple items from a popup containing a list of options with checkboxes.
Also provides a Check All option that allows you to select all options with a single click.
How to use it:
1. Add references to MSFmultiSelect’s JavaScript and Stylesheet.
<link rel="stylesheet" href="MSFmultiSelect.css" /> <script src="MSFmultiSelect.js"></script>
2. Wrap your select box into a container element.
<div id="example"> <select id="multiselect" class="form-control" name="languages[]" multiple="multiple"> <option value="1" selected>JavaScript</option> <option value="2">CSS</option> <option value="3" selected>HTML</option> <option value="4">Ruby</option> <option value="5">Go</option> <option value="6">PHP</option> <option value="7">ASP.Net</option> <option value="8">Java</option> </select> </div>
3. Initialize the library on the top container and done.
var mySelect = new MSFmultiSelect( document.querySelector('#multiselect'), { appendTo: '#example', // options here } );
4. Determine whether to enable the Check All functionality.
var mySelect = new MSFmultiSelect( document.querySelector('#multiselect'), { selectAll: true } );
5. Specify the height/width of the multiselect combo box.
var mySelect = new MSFmultiSelect( document.querySelector('#multiselect'), { width:350, height:30 } );
6. Add additional CSS classes to the multiselect combo box.
var mySelect = new MSFmultiSelect( document.querySelector('#multiselect'), { className: '' } );
7. Determin whether to enable the ReadOnly mode.
var mySelect = new MSFmultiSelect( document.querySelector('#multiselect'), { readOnly: true } );
8. Execute a function when the options are changed.
var mySelect = new MSFmultiSelect( document.querySelector('#multiselect'), { onChange:function(checked,value,instance){ console.log(checked,value,instance); } } );
9. Determine whether to enable the Live Search functionality.
var mySelect = new MSFmultiSelect( document.querySelector('#multiselect'), { searchBox: true } );
10. Determine the theme you’d like to use.
var mySelect = new MSFmultiSelect( document.querySelector('#multiselect'), { theme: 'theme1' // or 'theme2' } );
11. Possible API methods to control the multiselect 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();
Changelog:
v2 (12/10/2020)
- Two different themes
- Search box feature
- After Select all event
Thanks for share my project 🙂