Boostrap Multi Select- Part 2

Enable Clickable Option Groups 

optgroup's will be clickable, allowing to easily select multiple options belonging to the same group  , If set  enableClickableOptGroups to true. 

<script type="text/javascript">

    $('#exampleTwo').multiselect( {

      enableClickableOptGroups : true 
});

</script>

<select id="exampleTwo">

    <optgroup label="Group Europe">

        <option value="1-1">United Kingdom</option>

        <option value="1-2" selected="selected">France</option>

        <option value="1-3" selected="selected">Germany</option>

    </optgroup>

    <optgroup label="Group Asia">

        <option value="2-1">Sri Lanka</option>

        <option value="2-2">Japan</option>

        <option value="2-3">China</option>

    </optgroup>

</select>

Enable Collapsible Option Groups


optgroup's will be collapsible  If set enableCollapsibleOptGroups to true. 


<script type="text/javascript">

    $(document).ready(function() {

        $('#exampleTwo').multiselect({
            enableCollapsibleOptGroups: true
        });
    });

</script>

Max Height

Add a maximum height to the select list will help to improve the neatness of the

graphical interface of the web page.

<script type="text/javascript"> $(document).ready(function() { $('#example-with-maxHeight').multiselect({ maxHeight: 200 }); }); </script>

Buttons Features

We can customize the multiselect's button's width , CSS class , text and

title as follows.

<script type="text/javascript"> $(document).ready(function() { $('#exampleTwo').multiselect({ buttonClass: 'from-control' , buttonWidth: 200px, buttonText : 'Select Counrty' , buttonTitle: function(options, select) { var labels = []; options.each(function () { labels.push($(this).text()); }); return labels.join(' - '); } }); }); </script>