Bootstrap Mulitselect - Grouped Dataprovider

by Kyle Mitofsky

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/css/bootstrap-multiselect.css">
<script src="http://davidstutz.github.io/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>
<select class="multiselect" multiple="multiple"></select>

















<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Tag: <a href='http://stackoverflow.com/q/24980692/1366033'>Bootstrap multi select grouping dynamicaly using array</a><br/> 
    Fork This Skeleton Here: <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootstrap 3 Skeleton</a><br/>
<div>

JavaScript

var data = [{
    title: 'First group',
    children: [{ label: 'Cheese', value: 'cheese' }, 
               { label: 'Tomatoes', value: 'tomatoes' }]
    }, {
    title: 'Second group',
    children: [{ label: 'Mozzarella', value: 'mozzarella' }, 
               { label: 'Mushrooms', value: 'mushrooms' }]
}];

$('.multiselect').multiselect('dataprovider', data);