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');
}
}
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');
Попробуйте это выбрать все
$('#idSelect option').attr("selected","selected"); $('#idSelect').selectpicker('refresh');
Снять Выделение Со Всех
$('#idSelect option').attr("selected",false); $('#idSelect').selectpicker('refresh');
Для меня это сработало.
Используйте атрибут 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/ Чтобы узнать больше
Надеюсь, что это поможет...
$('.selectpicker option[value=All]').click(function(){ $('.selectpicker option').each(function(){ this.selected = $('.selectpicker option[value=All]').attr('selected'); }); });
Вы можете использовать мои функции:
первый измените свой код
<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'); }