用于多选的引导选择器 - 全选选项

Bootstrap selector for multiselect- select all option

本文关键字：选择器 全选 选项 用于      更新时间：2023-09-26

所以我需要的是多个引导选择器中的一个全选选项作为一个选项，所以我只是创建一个选择 

<select class="form-control selectpicker" multiple>
   <option value="all">All</option>
   <option value="1">Dog</option>
   <option value="2">Cat</option>
   <option value="3">Tiger</option>
</select>

当我单击All时，它将删除除所有选项之外的所有其他选项，如果我单击除All以外的任何选项，则需要删除所有选项

我尝试的是这样的 

$(".selectpicker").change(function(event){
    if ($( this ).find("option:first").is(':selected')) {
        $( this ).find("option").prop('selected', false);
        $( this ).find("option:first").prop('selected', true);
    } else {
        $( this ).find("option:first").prop('selected', false);
    }
});

但是一旦单击All，那么所有内容都会被激活，并且无法单击任何内容，我什至尝试在事件上获取价值onclick但由于引导选择器，我能够获得它？

有什么技巧可以做到这一点吗？ 我可以使用一个选择器的静态变量来做到这一点，但不能在一个表单中使用多个选择器来完成。

新编辑

这是一个有效的演示 

$('.selectpicker').selectpicker();
var all = $('option[value=all]');
$('.selectpicker').change(function() {
var all = $('option[value=all]'); 
var thisVal = all.html();
if (all.is(':selected')) {
    $('.selectpicker').selectpicker('deselectAll');    
    $('ul.dropdown-menu > li[rel=0]').addClass('selected');
    $('span.filter-option').html(thisVal);
} else {
    $('ul.dropdown-menu > li[rel=0]').removeClass('selected');
}
});

我认为你可以做类似的事情

$("#multiple-select option").prop("selected", "selected");
$('#multiple-select').selectpicker('refresh');

必须使用道具。

相关文章：