javascript - 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>
But I want the text to be "All ratings" when all options are selected, instead of "7 items selected".
关于如何实现这一目标的任何想法?我是JS新手,所以我不知道!
解决方案
您是否尝试过使用类似select2的东西
推荐阅读
- survival-analysis - 关于rms包中calibrate.cph函数的问题
- java - Maven Java 项目中缺少 WEB-INF 文件夹
- php - Woocommerce 产品已在购物车中
- javascript - 一种将参数添加到变量或其他东西的方法,这样我就不会向函数和变量发送垃圾邮件
- c++11 - 写一个pass,用乘法替换llvm指令中的所有加法(BinaryOperator)
- python-3.x - NotFittedError:DecisionTreeRegressor 实例尚未安装。在使用此估算器之前使用适当的参数调用“fit”
- javascript - 如何将 mysql 数字类型数据从 php 传递到 Javascript 以作为字符串类型到达?
- json - 带有特殊字符的 Ajax 请求使我的应用程序崩溃
- reactjs - 输入验证和空格
- python - Python Deap 框架中具有不同大小的多个属性