Grouped Multiple Selection Plugin For jQuery - GroupMultiSelect

Grouped Multiple Selection Plugin For jQuery - GroupMultiSelect
File Size: 4.87 KB
Views Total: 4611
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

The GroupMultiSelect jQuery plugin converts the normal select box into a multi-select UI where the users are able to select multiple nested options from a dropdown panel with checkboxes.

How to use it:

1. Include the basic stylesheet groupMultiSelect.css in the header of the html page.

<link rel="stylesheet" href="groupMultiSelect.css">

2. Create a normal select element for the plugin.

<div class="groupMultiSelect-demo">

3. Include jQuery library and the JavaScript groupMultiSelect.js at the end of the html page.

<script src="//"></script>
<script src="groupMultiSelect.js"></script>

4. Initialize the GroupMultiSelect plugin and define your own nested options as follows:

var groupselect =$(".groupMultiSelect-demo").groupMultiSelect({
      label:'Category 1',
      label:'Category 2',
        'SubItem 1',
        'SubItem 2',
        'SubItem 3'
    initial: {
      parent: 'Category 2',
        "SubItem 1",
        "SubItem 3"
    onChange: function (parent, children) {
        //Do stuff with the user selection

4. You're also allowed to define the nested data using the optgroup and options elements as follows:

<div class="groupMultiSelect-example">
    <optgroup label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    <optgroup label="German cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>

This awesome jQuery plugin is developed by Lingsita. For more Advanced Usages, please check the demo page or visit the official website.