This time I will share jQuery Plugin and tutorial about Grouped Multiple Selection Plugin For jQuery – GroupMultiSelect, hope it will help you in programming stack.
| File Size: | 4.87 KB |
|---|---|
| Views Total: | 4020 |
| 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.
|
1 |
<link rel="stylesheet" href="groupMultiSelect.css"> |
2. Create a normal select element for the plugin.
|
1 2 3 |
<div class="groupMultiSelect-demo"> <select></select> </div> |
3. Include jQuery library and the JavaScript groupMultiSelect.js at the end of the html page.
|
1 2 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
|
1 |
$(".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.
source : jqueryscript.net
