我使用bootstrap-select进行多项选择。并且我想在选择器中选择全部选项时显示文本“全部选定”。
如果选择全部7个选项,我希望它显示“全部选定”,则selectpicker中有7个选项v。
$('#selectsearch').selectpicker({
countSelectedText : "in {0} category selected",
noneSelectedText : "please select"
});
$('#selectsearch').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;
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');
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
<select id="selectsearch" data-width="100%" data-style="form-control shadow-none" multiple data-selected-text-format="count>2" data-all="false" required>
<option value="All" selected>All</option>
<option value="1st">1st Operator</option>
<option value="2nd">2nd Operator</option>
<option value="3rd">3rd Operator</option>
<option value="4th">4th Operator</option>
<option value="5th">5th Operator</option>
<option value="6th">6th Operator</option>
<option value="7th">7th Operator</option>
</select>