Iconic Multiselect is a multi-selection component written in pure JavaScript – also compatible with IE11. Easy-to-use, easy-to-configure, multi-browser selection components based on Vanilla JavaScript. Works with native HTML checkbox.
vanilla js multi select dropdown, javascript multiselect dropdown with checkbox, jquery multiselect dropdown with search, multiselect dropdown with checkbox jquery plugin
Convert Selected Item Into Checkboxes jQuery Plugin Radio Buttons
How to make use of it:
1. Insert the Iconic Multiselectβs JavaScript into the doc.
<!-- With IE 11 Polyfills --> <script src="multi-select-ie11-polyfills.min.js"></script> <!-- Without IE 11 Polyfills --> <script src="multi-select.min.js"></script>
2. Create a brand new occasion of the Iconic Multiselect.
<select id="example"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> ... </select>
var multiSelect = new IconicMultiSelect({ select: "#example", })
3. Initialize the Iconic Multiselect and executed.
multiSelect.init();
4. You may also outline the choices in an array of objects as follows:
var multiSelect = new IconicMultiSelect({ data: [ { id: 1, item: 'Option 1'}, { id: 2, item: 'Option 2'}, { id: 3, item: 'Option 3'} ], textField: 'item', valueField: 'id', })
5. Available configurations.
var multiSelect = new IconicMultiSelect({ // placeholder text placeholder: "Select... ", // message to show if no data noData: "No data found. ", // message to show if no results noResults: "No results found.", })
6. Listen to the choice modifications.
multiSelect.subscribe(function(e) { console.log(e); });
7. Determine whether or not to inject CSS within the <head> tag.
var multiSelect = new IconicMultiSelect({ customCss: true, })
Cross-browser Multi-Select Component, Iconic Multiselect Plugin/Github, how to select multiple options from a drop down list in javascript, custom multi select dropdown css
See Demo And Download
Official Website(sidneywm): Click Here
This superior jQuery/javascript plugin is developed by sidneywm. For extra Advanced Usages, please go to the official website.
Be First to Comment