Select 全部/取消选择 Bootstrap Select 插件中的全部

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 的选项。如果该选项被 select 编辑，我想 select 所有项目，如果我取消 select 这个选项，我想取消 select 所有项目。

我认为这很容易做到，但我不明白为什么 $('#divRatings').change(function(){//some logic});

上没有任何反应

我对 select/ unselect 项的函数：

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

JSFiddle example

Answer 1

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

Answer 2

您的 javascript 的问题是任何时候用户点击您选中的任何选项，如果 "All ratings" 选项仍然被选中 - 您也选中所有其他选项（即使您只是取消选中任何选项）。如果未选中 "All ratings"，则取消选中所有其他选项。所以，实际上只有 "All ratings" 选项是可点击的。如果您单击任何其他选项，它会立即 checked/unchecked 在您的 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

试试这个 select全部

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

未select全部

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

对我来说，这很有效。

Answer 4

使用 data-actions-box="true" 属性获取 select all 和 deselect all 选项。试试这个代码

<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 5

你可以使用我的函数:

先修改密码

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

到

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

和second在你的<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 6

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

所以对于给定的 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 7

我从@glyuck 的回答开始，但做了一点改动。我不希望 'All' 项目被选中，然后让 bootstrap-select 显示 'N items selected' 其中之一是 'All' 项目。所以基本上，对我来说，那个项目将 'never select'，它或多或少只是一个 'button' 来切换状态。

我的标记如下所示：

<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 的启发。

Fiddle: http://jsfiddle.net/3Lr4jsz0/

Answer 8

已经回答了，但我找到了更好的方法(link to documentation)。

只需添加 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>

Select 全部/取消选择 Bootstrap Select 插件中的全部

Select all / Unselect all in Bootstrap Select plugin

jquery

twitter-bootstrap

bootstrap-selectpicker