GitHub - apiko-dev/meteor-bootstrap-multi-select

Basics

This package is a reactive wrapper for 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:

<template name="testTemplate">
  {{> MultiSelect id="options-select" name="options-select" multiple="multiple" options=options selectOptions=selectOptions}}
</template>

and create helpers:

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:

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.

Made by - Professional Meteor Development Company