Grouped Multiple Selection Plugin For jQuery - GroupMultiSelect

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">
  <select></select>
</div>

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

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="groupMultiSelect.js"></script>

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

var groupselect =$(".groupMultiSelect-demo").groupMultiSelect({
    options:[{
      label:'Category 1',
      subItems:[]
    },{
      label:'Category 2',
      subItems:[
        'SubItem 1',
        'SubItem 2',
        'SubItem 3'
      ]},
    ],
    placeholder:"Placeholder",
    initial: {
      parent: 'Category 2',
      children:[
        "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">
  <select>
    <optgroup label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </optgroup>
  </select>
</div>

$(".groupMultiSelect-example").groupMultiSelect();

---

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