jquery - 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 的选项。如果选择了该选项，我想选择所有项目；如果取消选择此选项，则取消选择所有项目。

我认为这很简单，但我不明白为什么 $('#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

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

希望这有帮助...