2.4.0 • Published 3 years ago
msfmultiselect v2.4.0
MSFmultiSelect
MSFmultiSelect (multiselect) is a pure JavaScript user-friendly multiselect library, don't need jQuery. It's very easy to use for developers and fast.
Documentation (Demo) | Try it (JSFiddle) | Download
Installation
Use npm to install the latest version.
npm i msfmultiselect
Import MSFmultiSelect and its stylesheet.
import MSFmultiSelect from "msfmultiselect";
import 'msfmultiselect/msfmultiselect.min.css';
Alternatively, you can simply embed it in your HTML file.
<script src="https://cdn.jsdelivr.net/gh/minisuperfiles/MSFmultiSelect/msfmultiselect.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/minisuperfiles/MSFmultiSelect/msfmultiselect.min.css" rel="stylesheet"/>
Using Example
Add references to MSFmultiSelect’s JavaScript and Stylesheet.
<script src="msfmultiselect.js"></script>
<link rel="stylesheet" href="msfmultiselect.css"/>
Select box container element.
<div id="myselect">
<select id="multiselect" name="languages[]" multiple="multiple">
<option value="1" selected>HTML</option>
<option value="2" selected>CSS</option>
<option value="3">MySql</option>
<option value="4">XML</option>
<option value="5">JSON</option>
<option value="6">YAML</option>
<option value="7">MongoDB</option>
<option value="8">SQLite</option>
</select>
</div>
JavaScript code
var select = new MSFmultiSelect(
document.querySelector('#multiselect'),
{
selectAll: true,
searchBox: true,
onChange:function(checked, value, instance) {
console.log(checked, value, instance);
}
}
);
Syntax (arguments)
new MSFmultiSelect(element)
new MSFmultiSelect(element, settings)
element = document.getElementById('multiselect')
settings = {
width: 350,
height: 40,
className: 'myclass',
onChange: function(checked, value, instance) {
console.log(checked, value, instance);
},
selectAll: true,
searchBox: true,
appendTo: '#myselect',
readOnly: true,
afterSelectAll: function(checked, values, instance) {
console.log(checked, values, instance);
},
autoHide: false
}
element
Give DOM select element, this element posted in your backend.
settings (Optional)
Give the object of settings your multiselect.
Learn more about in minisuperfiles.blogspot.com