-
加载中...
Try this
select All
$('#idSelect option').attr("selected","selected");
$('#idSelect').selectpicker('refresh');
Unselect All
$('#idSelect option').attr("selected",false);
$('#idSelect').selectpicker('refresh');
for my, this worked.
讨论(0)
I came accross this question while seeking for a quick solution to toggle on/off all option in a selectpicker
<select>
and I ended up drafting my own, one-liner style, that works for both on and off states:
So for a given 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');
});
讨论(0)
$('.selectpicker option[value=All]').click(function(){
$('.selectpicker option').each(function(){
this.selected = $('.selectpicker option[value=All]').attr('selected');
});
});
讨论(0)
Problem with your javascript is that anytime user clicks any option you check, if "All ratings" option is still checked - you check all other options too (even if you just unchecked any option). And if "All ratings" is unchecked, you uncheck all other options. So, in fact only "All ratings" option is clickable. If you click any other option, it's immediatelly checked/unchecked in your onchange
handler.
Try this code:
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/
Updated code
http://jsfiddle.net/surajkm33/tsomyckj/
讨论(0)
Use data-actions-box="true" attribute to get select all and deselect all option. Try this code
<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>
Please visit [https://silviomoreto.github.io/bootstrap-select/options/][1]
[1]: https://silviomoreto.github.io/bootstrap-select/options/ To Know more
Hope this help...
讨论(0)
- 热议问题