Bootstrap 多选下拉

问题描述

我想使用@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>

但我希望在选择所有选项时文本为“所有评级”,而不是“选择了 7 个项目”。

关于如何实现这一目标的任何想法?我是 JS 新手,所以我不知道!

解决方法

您是否尝试过使用类似 https://github.com/prule/kordamp-template-project