title: Bootstrap multiselect dropdown
body: <p>I want to use a multiselect dropdown like in this example by @glyuck</p>
  <p><a href="http://jsfiddle.net/surajkm33/tsomyckj/" rel="nofollow noreferrer">http://jsfiddle.net/surajkm33/tsomyckj/</a></p>
  <pre><code>&lt;select id=&quot;divRatings&quot; class=&quot;selectpicker&quot; multiple data-size=&quot;5&quot; data-selected-text-format=&quot;count&gt;2&quot;&gt;
      &lt;option value=&quot;All&quot; selected=&quot;selected&quot;&gt;All Ratings&lt;/option&gt;
      &lt;option value=&quot;EC&quot;&gt;EC (Early Childhood)&lt;/option&gt;
      &lt;option value=&quot;E&quot;&gt;E (Everyone)&lt;/option&gt;
      &lt;option value=&quot;E10+&quot;&gt;E10+ (Everyone 10+)&lt;/option&gt;
      &lt;option value=&quot;T&quot;&gt;T (Teen)&lt;/option&gt;
      &lt;option value=&quot;M&quot;&gt;M (Mature)&lt;/option&gt;
      &lt;option value=&quot;AO&quot;&gt;AO (Adults Only)&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;script&gt;
  $('#divRatings').on('change', function(){
          var thisObj = $(this);
      var isAllSelected = thisObj.find('option[value=&quot;All&quot;]').prop('selected');
      var lastAllSelected = $(this).data('all');
      var selectedOptions = (thisObj.val())?thisObj.val():[];
          var allOptionsLength = thisObj.find('option[value!=&quot;All&quot;]').length;
       
       console.log(selectedOptions);
        var selectedOptionsLength = selectedOptions.length;
       
      if(isAllSelected == lastAllSelected){
      
      if($.inArray(&quot;All&quot;, selectedOptions) &gt;= 0){
          selectedOptionsLength -= 1;      
      }
              
        if(allOptionsLength &lt;= selectedOptionsLength){
        
        thisObj.find('option[value=&quot;All&quot;]').prop('selected', true).parent().selectpicker('refresh');
        isAllSelected = true;
        }else{       
          thisObj.find('option[value=&quot;All&quot;]').prop('selected', false).parent().selectpicker('refresh');
           isAllSelected = false;
        }
        
      }else{          
          thisObj.find('option').prop('selected', isAllSelected).parent().selectpicker('refresh');
      }
     
          $(this).data('all', isAllSelected);
  }).trigger('change');
  &lt;/script&gt;
  
  </code></pre>
  <p>But I want the text to be &quot;All ratings&quot; when all options are selected, instead of &quot;7 items selected&quot;.</p>
  <p>Any ideas on how to achieve that? I am new to JS so I don't have a clue!</p>