17 
<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 中有带有 value 的选项All。如果选择了该选项，我想选择所有项目，如果我取消选择该选项，则取消选择所有项目。

我认为这很简单，但我不明白为什么什么也没发生$('#divRatings').change(function(){//some logic});

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

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

JSFiddle 示例

4

8 回答 8

20

使用 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/ 了解更多

希望这有助于...

于 2017-03-27T08:21:42.233 回答
13

试试这个 全选

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

全部取消选择

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

对我来说，这行得通。

于 2015-11-26T15:26:08.303 回答
7

您的 javascript 的问题是，无论何时用户单击您检查的任何选项，如果仍然选中“所有评级”选项 - 您也会检查所有其他选项（即使您刚刚取消选中任何选项）。如果未选中“所有评级”，则取消选中所有其他选项。所以，实际上只有“所有评级”选项是可点击的。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/

于 2015-01-23T15:09:39.890 回答
7

已经回答了，但我找到了更好的方法（链接到文档）。

只需添加data-actions-box="true"作为选择标签的属性。

例如。

<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>
于 2020-05-29T22:51:25.753 回答
0 
$('.selectpicker option[value=All]').click(function(){
    $('.selectpicker option').each(function(){
        this.selected = $('.selectpicker option[value=All]').attr('selected');
    });
});
于 2015-01-23T13:57:21.107 回答
0

您可以使用我的功能：

首先更改您的代码

<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');
}
于 2017-04-29T15:09:23.733 回答
0

我从@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/

于 2019-06-01T21:57:29.927 回答
0

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

所以对于给定的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');
});
于 2019-02-07T14:20:31.870 回答