Select all / Unselect all в Bootstrap Select plugin

<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

5 5
jquery twitter-bootstrap

5 ответов:

Проблема с вашим 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/

5

Попробуйте это выбрать все

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

Снять Выделение Со Всех 

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

Для меня это сработало.

6

Используйте атрибут data-actions-box= "true", чтобы получить опцию select 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/ Чтобы узнать больше

Надеюсь, что это поможет...

2
$('.selectpicker option[value=All]').click(function(){
    $('.selectpicker option').each(function(){
        this.selected = $('.selectpicker option[value=All]').attr('selected');
    });
});
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');
}
0