https://github.com/apiko-dev/meteor-bootstrap-multi-select
https://github.com/apiko-dev/meteor-bootstrap-multi-select
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/apiko-dev/meteor-bootstrap-multi-select
- Owner: apiko-dev
- Created: 2016-05-19T09:08:30.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-05-19T13:05:53.000Z (about 10 years ago)
- Last Synced: 2025-03-05T17:53:31.281Z (over 1 year ago)
- Language: JavaScript
- Size: 14.6 KB
- Stars: 1
- Watchers: 6
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jss:bootstrap-multi-select
## Basics
This package is a reactive wrapper for [Bootstrap Multiselect](https://github.com/davidstutz/bootstrap-multiselect)
jQuery plugin. It produce a template with name `MultiSelect` for creating reactive dropdown select component.
## How to use
For using multi select, you should to create a template with `MultiSelect` calling:
```html
{{> MultiSelect id="options-select" name="options-select" multiple="multiple" options=options selectOptions=selectOptions}}
```
and create helpers:
```js
Template.testTemplate.helpers({
options () {
return [
{
label: 'Option 1',
value: '1'
},
{
label: 'Option 2',
value: '2'
},
{
label: 'Option 3',
value: '3'
}
];
},
selectOptions () {
return {
buttonClass: 'btn btn-white',
nonSelectedText: 'Check option',
onChange () {
// change handler
}
};
}
});
```
You should get something like this:
For creating a group of options, your `options` helper should be rewrite:
```js
options () {
return [
{
label: 'Group 1',
children: [
{
label: 'Option 1',
value: '1'
},
{
label: 'Option 2',
value: '2'
},
{
label: 'Option 3',
value: '3'
}
]
},
{
label: 'Group 2',
children: [
{
label: 'Option 1',
value: '1'
},
{
label: 'Option 2',
value: '2'
},
{
label: 'Option 3',
value: '3'
}
]
}
];
}
```
The result:
To learn about all available select options you can [here](http://davidstutz.github.io/bootstrap-multiselect/#configuration-options).
Made by [](http://jssolutionsdev.com) - [Professional Meteor Development Company](http://jssolutionsdev.com)