https://github.com/minisuperfiles/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.
https://github.com/minisuperfiles/msfmultiselect
array-msfmultiselect easy-to-use javascript minisuperfiles multiselect pure-javascript without-jquery
Last synced: 11 days ago
JSON representation
MSFmultiSelect (multiselect) is a pure JavaScript user-friendly multiselect library, don't need jQuery. It's very easy to use for developers and fast.
- Host: GitHub
- URL: https://github.com/minisuperfiles/msfmultiselect
- Owner: minisuperfiles
- License: mit
- Created: 2020-06-07T15:37:14.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-06-24T14:07:53.000Z (almost 2 years ago)
- Last Synced: 2025-04-22T16:53:52.444Z (about 1 month ago)
- Topics: array-msfmultiselect, easy-to-use, javascript, minisuperfiles, multiselect, pure-javascript, without-jquery
- Language: JavaScript
- Homepage: https://minisuperfiles.blogspot.com
- Size: 85 KB
- Stars: 8
- Watchers: 1
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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)](https://minisuperfiles.blogspot.com/p/documentation.html?project=msfmultiselect) | [Try it (JSFiddle)](https://jsfiddle.net/minisuperfiles/r0L2yusd/) | [Download](https://github.com/minisuperfiles/MSFmultiSelect/archive/2.4.zip)
## Installation
Use npm to install the latest version.
```
npm i msfmultiselect
```
Import MSFmultiSelect and its stylesheet.
```javascript
import MSFmultiSelect from "msfmultiselect";
import "msfmultiselect/msfmultiselect.min.css";
```
Alternatively, you can simply embed it in your HTML file.
```html
```
## Using Example
Add references to MSFmultiSelect’s JavaScript and Stylesheet.
```html
```
Select box container element.
```html
HTML
CSS
MySql
XML
JSON
YAML
MongoDB
SQLite
```
JavaScript code
```javascript
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.
-
appendTo : give element selector string, it uses to target place to create multiselect.
-
width : It is control of the mulitiselect width.
-
height : It is control of the mulitiselect height.
-
className : if you need any custom style, give css class name, it will apply to mulitiselect.
-
onChange : When multiselect is changed this callback function will run. In this function, there are three parameters.
-
checked : you receive boolean data, selected item checked, or unchecked.
-
value : You get selected item value.
-
instance : It's instance variable of mulitiselect, you can access multiselect properties and methods
-
selectAll : If your given value is true, then the select-all feature is will enable. It helps one click to select all options
-
afterSelectAll : When users click the select-all feature this callback function will run. In this function, there are three parameters.
-
checked : you receive boolean data, selected item checked, or unchecked.
-
values : You get selected item values in array.
-
instance : It's instance variable of mulitiselect, you can access multiselect properties and methods
-
searchBox : If your given value is true, the search box feature is will enable. It helps to search the option values.
-
theme : There are two themes available. They are theme1 and theme2. theme1 is a regular multi-select, theme2 multi-select have directly remove selected value option button.
-
autoHide : If your given value is false, selectable values always displayed on the screen.
MSFmultiSelect Methods
MSFmultiSelect.setValue(sellectedValues, changeTrigger)- This method is used to add selected values, this method needs two arguments, sellectedValues argument value has select option values in an array format. If you changeTrigger argument value is true then it triggers to onChange event.
-
code :select.setValue(['4','8']); //give select option values in array
-
MSFmultiSelect.removeValue(removeSellectedValues, changeTrigger)- This method is used to remove selected values, this method needs two arguments, removeSellectedValues argument value has select option values in an array format. If you changeTrigger argument value is true then it triggers to onChange event.
-
code :select.removeValue(['4','8']); //give select option values in array
-
MSFmultiSelect.getData()- This methods use to get selected values of mulitiselect
-
code :console.log(select.getData());
-
MSFmultiSelect.selectAll(ctrlSwitch)- This method uses to select all option in the multiselect list or unselect all option in the list, this method needs one argument and its boolean value, if give true, select all option in multiselect list or you give false value unselect all in multiselect list.
-
code :select.selectAll(true); select.selectAll(false);
-
MSFmultiSelect.loadSource(options)- This method uses to load options in multiselect. This method needs one argument and its need array format.
-
formet :var options = [
{caption:'optiontext1', value:'optionvalue1', selected:true},
{caption:'optiontext2', value:'optionvalue2', selected:false}
];
-
MSFmultiSelect.getSource()- This method uses to get current source data, it will return the array format.
-
code :console.log(select.getSource());
-
MSFmultiSelect.reload()- This use to recreate the mulitselect.
-
code :select.reload();
-
Learn more about in [minisuperfiles.blogspot.com](https://minisuperfiles.blogspot.com)