MultiSelect SelectPicker

All select

by Pankaj Sapkal

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<select id="divRatings" class="selectpicker" multiple data-size="5" data-selected-text-format="count>2">
    <option value="All" >All Domains</option>
    <option value="EC">EC (Early Childhood)</option>
    <option value="E">E (Everyone)</option>
    <option value="E10+">E10+ (Everyone 10+)</option>
    <option value="T">T (Teen)</option>
    <option value="M">M (Mature)</option>
    <option value="AO">AO (Adults Only)</option>
</select>

JavaScript

function toggleSelectAll(control) {
debugger;
var allOptionIsSelected;
//var allOptionIsSelected = (control.val() || []).indexOf("All") > -1;
if(control.val().length > 1)
{
allOptionIsSelected = false;
}
else
{

allOptionIsSelected = true;
}

    function valuesOf(elements) {
    var ele = elements
    var itemtoRemove = "All Ratings";
    ele.splice($.inArray(ele[0], ele),1);
    var finalEle = ele;
        return $.map(finalEle, function(element) {
            return element.value;
        });
    }

    if (control.data('allOptionIsSelected') != allOptionIsSelected) {
        // User clicked 'All' option
        if (allOptionIsSelected) {
            // Can't use .selectpicker('selectAll') because multiple "change" events will be triggered
            control.selectpicker('val', valuesOf(control.find('option')));
        } else {
            control.selectpicker('val', []);
        }
    } else {
        // User clicked other option
        //if (allOptionIsSelected && control.val().length != control.find('option').length) {
            // All options were selected, user deselected one option
            // => unselect 'All' option
           // control.selectpicker('val', valuesOf(control.find('option:selected[value!=All]')));
           // allOptionIsSelected = false;
        //} else if (!allOptionIsSelected && control.val().length == control.find('option').length - 1) {
            // Not all options were selected, user selected all options except 'All' option
            // => select 'All' option too
          //  control.selectpicker('val', valuesOf(control.find('option')));
          //  allOptionIsSelected = true;
        //}
    }
    control.data('allOptionIsSelected', allOptionIsSelected);
}

$('#divRatings').selectpicker().change(function(){toggleSelectAll($(this));}).trigger('change');