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

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示例

Answer 1

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

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

试试这个选择全部

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

全部取消选择

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

对我来说,这很有效.

Answer 3

您的 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/

Answer 4

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

希望能有所帮助...