javascript - 用于多选的引导选择器 - 选择所有选项

Question

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

<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事件上获取值，但由于引导选择选择器，我可以明白了吗？

有什么技巧可以实现这一点吗？我可以使用一个选择器的静态变量来完成此操作，但无法使用表单中的多个选择器来完成。

Answer 1

新编辑

这是一个工作 DEMO

$('.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');
}
});