JSFiddle - React, Tailwind, and code Playground

by André Albson

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css">
<script src="//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" selected="selected">All Ratings</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) {
    var allOptionIsSelected = (control.val() || []).indexOf("All") > -1;
    function valuesOf(elements) {
        return $.map(elements, 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');