JSFiddle - React, Tailwind, and code Playground

by Suraj Kumar Maurya

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
<select id="divRatings" class="selectpicker" multiple data-size="5" data-selected-text-format="count>2" data-all="false">
    <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

$('#divRatings').on('change', function(){
		var thisObj = $(this);
    var isAllSelected = thisObj.find('option[value="All"]').prop('selected');
    var lastAllSelected = $(this).data('all');
    var selectedOptions = (thisObj.val())?thisObj.val():[];
    	var allOptionsLength = thisObj.find('option[value!="All"]').length;
     
     console.log(selectedOptions);
      var selectedOptionsLength = selectedOptions.length;
     
    if(isAllSelected == lastAllSelected){
    
    if($.inArray("All", selectedOptions) >= 0){
    	selectedOptionsLength -= 1;      
    }
        	
      if(allOptionsLength <= selectedOptionsLength){
      
      thisObj.find('option[value="All"]').prop('selected', true).parent().selectpicker('refresh');
      isAllSelected = true;
      }else{       
      	thisObj.find('option[value="All"]').prop('selected', false).parent().selectpicker('refresh');
         isAllSelected = false;
      }
      
    }else{   		
    	thisObj.find('option').prop('selected', isAllSelected).parent().selectpicker('refresh');
    }
   
		$(this).data('all', isAllSelected);
}).trigger('change');