Question

<select id="divRatings" class="selectpicker" multiple title='Choose one of the following...' 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>

在上面的html中，有值为All的选项。如果选择了该选项，我想选择所有项目，如果取消选择此选项，则取消选择全部。

我认为这样做很简单，但我无法理解$('#divRatings').change(function(){//some logic});

上没有发生任何事情的原因

我选择/取消选择项目的功能：

  function toggleSelectAll(control) {
    if (control.val().indexOf("All,") > -1) {
        control.selectpicker('selectAll');
    } else {
        control.selectpicker('deselectAll');
    }
}

JSFiddle example

Answer 1

试试这个选择全部

$('#idSelect option').attr("selected","selected");
$('#idSelect').selectpicker('refresh');

取消全选

$('#idSelect option').attr("selected",false);
$('#idSelect').selectpicker('refresh');

对我来说，这很有用。

Answer 2

您的javascript问题是，只要用户点击您检查的任何选项，即使＆＃34;所有评分＆＃34;选项仍然被选中 - 您也检查所有其他选项（即使您只是取消选中任何选项）。如果＆＃34;所有评级＆＃34;如果未选中，则取消选中所有其他选项。所以，实际上只有＆＃34;所有评级＆＃34;选项是可点击的。如果您点击任何其他选项，则会在onchange处理程序中立即检查/取消选中。

试试这段代码：

function toggleSelectAll(control) {
    var allOptionIsSelected = (control.val() || []).indexOf("All") > -1;
    function valuesOf(elements) {
        return $.map(elements, function(element) {
            return element.value;
        });
    }

    if (control.data('allOptionIsSelected') != allOptionIsSelected) {
        // User clicked 'All' option
        if (allOptionIsSelected) {
            // Can't use .selectpicker('selectAll') because multiple "change" events will be triggered
            control.selectpicker('val', valuesOf(control.find('option')));
        } else {
            control.selectpicker('val', []);
        }
    } else {
        // User clicked other option
        if (allOptionIsSelected && control.val().length != control.find('option').length) {
            // All options were selected, user deselected one option
            // => unselect 'All' option
            control.selectpicker('val', valuesOf(control.find('option:selected[value!=All]')));
            allOptionIsSelected = false;
        } else if (!allOptionIsSelected && control.val().length == control.find('option').length - 1) {
            // Not all options were selected, user selected all options except 'All' option
            // => select 'All' option too
            control.selectpicker('val', valuesOf(control.find('option')));
            allOptionIsSelected = true;
        }
    }
    control.data('allOptionIsSelected', allOptionIsSelected);
}

$('#divRatings').selectpicker().change(function(){toggleSelectAll($(this));}).trigger('change');

http://jsfiddle.net/bu5vjdk6/4/

更新了代码
http://jsfiddle.net/surajkm33/tsomyckj/

Answer 3

使用data-actions-box =“true”属性获取全选并取消选择所有选项。试试这段代码

<select id="divRatings" class="selectpicker" multiple title='Choose one of the following...' data-size="5" data-selected-text-format="count>2" data-actions-box="true">
            <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>

请访问[https://silviomoreto.github.io/bootstrap-select/options/][1]

[1]：https://silviomoreto.github.io/bootstrap-select/options/了解更多

希望这有帮助...

Answer 4

已经回答了，但是我找到了更好的方法。

只需添加 data-actions-box =“ true” 作为 select 标签的属性即可。

例如

<label>Select/deselect all</label>
<select class="selectpicker form-control" data-style="btn-outline-warning" multiple data-actions-box="true">
    <optgroup label="Condiments">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
    </optgroup>
    <optgroup label="Breads">
        <option>Plain</option>
        <option>Steamed</option>
        <option>Toasted</option>
    </optgroup>
</select>

Answer 5

$('.selectpicker option[value=All]').click(function(){
    $('.selectpicker option').each(function(){
        this.selected = $('.selectpicker option[value=All]').attr('selected');
    });
});

Answer 6

您可以使用我的功能：

首先更改您的代码

<option value="All" selected="selected">All Ratings</option>

到

<option value="All" id="target" selected="selected">All Ratings</option>

在您的<script>代码

之间添加

和第二

$( "#target" ).toggle(function() {
  selectAll($( "#divRatings" ))
}, function() {
  selectClear($( "#divRatings" ))
});

function selectAll(element){//Select All Function
    element.prop('selected', true);
    element.selectpicker('refresh');
}
function selectClear(element){//Clear All Function
    element.prop('selected', false);
    element.selectpicker('refresh');
}

Answer 7

遇到这个问题时，我寻求一种快速的解决方案来打开/关闭selectpicker <select>中的所有选项，最后我起草了自己的单线风格 strong>，适用于打开和关闭状态：

因此对于给定的select#my-select：

HTML

<div>
    <input type="checkbox" id="select_all" data-id-select="my-select">
    <label for="select_all">Toggle all</label>
</div>

JS / jQuery

$('#select_all').on('click', function() {
    $('#' + $(this).data('id-select')).find('option').prop('selected', $(this).is(':checked')).parent('select').selectpicker('refresh');
});

Answer 8

我从@glyuck答案开始，但做了一点修改。我不想选择“所有”项目，然后让引导程序选择显示“已选择N个项目”，其中一个是“所有”项目。因此，基本上，对我而言，该项目将“从不选择”，它或多或少只是一个用于切换状态的“按钮”。

我的标记如下：

<select size="4" multiple="multiple" class="form-control selectpicker show-tick select-all" data-selected-text-format="count > 2">
    <option value="[all]" class="select-all">All Items</option>
    <option value="" data-divider="true"></option>
    <option value="0">Members Selected</option>
    <option value="1">Separated Members Selected</option>
    <option value="2">Request Approval</option>
    <option value="3">Approved</option>
    <option value="4">Rejected</option>
</select>

然后按照我想要的方式工作的代码是：

$('.selectpicker.select-all').on('change', function () {
    var selectPicker = $(this);
    var selectAllOption = selectPicker.find('option.select-all');
    var checkedAll = selectAllOption.prop('selected');
    var optionValues = selectPicker.find('option[value!="[all]"][data-divider!="true"]');

    if (checkedAll) {
        // Process 'all/none' checking
        var allChecked = selectAllOption.data("all") || false;

        if (!allChecked) {
            optionValues.prop('selected', true).parent().selectpicker('refresh');
            selectAllOption.data("all", true);
        }
        else {
            optionValues.prop('selected', false).parent().selectpicker('refresh');
            selectAllOption.data("all", false);
        }

        selectAllOption.prop('selected', false).parent().selectpicker('refresh');
    }
    else {
        // Clicked another item, determine if all selected
        var allSelected = optionValues.filter(":selected").length == optionValues.length;
        selectAllOption.data("all", allSelected);
    }
}).trigger('change');

感谢@glyuck的启发。

提琴：http://jsfiddle.net/3Lr4jsz0/

在Bootstrap Select插件中选择all / Unselect all

8 个答案: