Author: | jagadeesanjd11 |
---|---|
Views Total: | 720 views |
Official Page: | Go to website |
Last Update: | June 24, 2023 |
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. Determine 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' (tags input) } );
11. Set the placeholder.
var mySelect = new MSFmultiSelect( document.querySelector('#multiselect'), { placeholder: '' } );
12. Event handlers.
var mySelect = new MSFmultiSelect( document.querySelector('#multiselect'), { onChange:function(checked, value, instance) { console.log(checked, value, instance); }, afterSelectAll: function(checked, values, instance) { console.log(checked, values, instance); }, } );
13. 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.5 (06/24/2023)
- update
v2.4 (07/14/2021)
- selectAll checkbox behavior bug fixed
v2.3 (07/09/2021)
- Search bug fixed.
v2.2 (07/08/2021)
- Close button click callback event bug fixed
- sellectAll(false) execute dialog box open bug fixed
v2.1 (05/05/2021)
- Update
v2 (12/10/2020)
- Two different themes
- Search box feature
- After Select all event
Thanks for share my project 🙂
how get the selected data??
here have full documents and new version available – https://github.com/minisuperfiles/MSFmultiSelect
OnChange event doesn’t work when all options are selected
here have full documents and new version available – https://github.com/minisuperfiles/MSFmultiSelect