<div data-toggle="group-select"
     data-data="Bootstrap Table, Multiple Select, Bootstrap Show Password, Bootstrap Group Select"
     data-value="Bootstrap Group Select"></div>

<div data-toggle="group-select"
     data-type="dropdown"
     data-data="Bootstrap Table, Multiple Select, Bootstrap Show Password, Bootstrap Group Select"
     data-value="Bootstrap Group Select"></div>

<div data-toggle="group-select"
     data-default-class="btn btn-info"
     data-primary-class="btn btn-success"
     data-data="Bootstrap Table, Multiple Select, Bootstrap Show Password, Bootstrap Group Select"
     data-value="Bootstrap Group Select"></div>

<div data-toggle="group-select"
     data-type="dropdown"
     data-default-class="btn btn-info"
     data-primary-class="btn btn-success"
     data-data="Bootstrap Table, Multiple Select, Bootstrap Show Password, Bootstrap Group Select"
     data-value="Bootstrap Group Select"></div>

<div data-toggle="group-select"
     data-data="Bootstrap Table, Multiple Select, Bootstrap Show Password, Bootstrap Group Select"
     data-value="Bootstrap Group Select"
     data-formatter="<i class='glyphicon glyphicon-heart'></i> %s"></div>

<div data-toggle="group-select"
     data-type="dropdown"
     data-primary-class="btn btn-default"
     data-data="[0,1,2,3]"
     data-value="3"
     data-formatter="starFormatter"></div>

<script>
    function starFormatter(value) {
        var name = [
            'Bootstrap Table', 'Multiple Select',
            'Bootstrap Show Password', 'Bootstrap Group Select'
        ][value];

        return '<i class="glyphicon glyphicon-star"></i> ' + name;
    }
</script>

<div id="eventsGs1"
     data-toggle="group-select"
     data-data="Bootstrap Table, Multiple Select, Bootstrap Show Password, Bootstrap Group Select"
     data-value="Bootstrap Group Select"></div>
<script>
    $(function () {
        $('#eventsGs1').on('select.bs.group-select', function (e, value) {
            alert('On select: ' + value);
        });
    });
</script>

<div id="eventsGs"
     data-toggle="group-select"
     data-data="Bootstrap Table, Multiple Select, Bootstrap Show Password, Bootstrap Group Select"
     data-value="Bootstrap Group Select"></div>
<script>
    $(function () {
        $('#eventsGs2').on('select.bs.group-select', function (e, value) {
            alert('On select: ' + value);
        });
    });
</script>

<div id="methods1"
     data-toggle="group-select"
     data-data="getValue, setValue, getData, setData, enable, disable"
     data-value=""></div>

<div id="methods2"
     data-toggle="group-select"
     data-type="dropdown"
     data-data="Bootstrap Table, Multiple Select, Bootstrap Show Password, Bootstrap Group Select"
     data-value="Bootstrap Group Select"></div>

<script>
    $(function () {
        var $methods1 = $('#methods1'),
            $methods2 = $('#methods2');

        $methods1.on('select.bs.group-select', function (e, value) {
            switch (value) {
                case 'getValue':
                case 'getData':
                    alert(value + ': ' + JSON.stringify($methods2.groupSelect(value)));
                    break;
                case 'setValue':
                    $methods2.groupSelect(value, 'Bootstrap Group Select');
                    break;
                case 'setData':
                    $methods2.groupSelect(value, ['Bootstrap Group Select', 'Bootstrap Table']);
                    break;
                case 'enable':
                case 'disable':
                    $methods2.groupSelect(value);
                    break;
            }
        });
    });
</script>