Bootstrap 多选下拉菜单

Question

I want to use a multiselect dropdown like in this example by @glyuck

http://jsfiddle.net/surajkm33/tsomyckj/

<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>

<script>
$('#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');
</script>

But I want the text to be "All ratings" when all options are selected, instead of "7 items selected".

Any ideas on how to achieve that? I am new to JS so I don't have a clue!

Answer 1

您是否尝试过使用select2 之类的东西