bootstrap-select
bootstrap-select copied to clipboard
Can't change selectAllText and deselectAllText dynamically.
I want users to be able to change language on the fly, it works for title, but not for selectAllText and deselectAllText. This also could be me using it wrong. This is in Angular:
<select
class="form-control custom-select selectpicker"
multiple
data-container="body"
data-actions-box="true"
[attr.title]="'select.none' | translate"
[attr.data-featureId]="featureDefinition.id"
[attr.data-select-all-text]= "'select.all' | translate"
[attr.data-deselect-all-text]= "'select.none' | translate"
(change)="changeFeature($event.target, featureDefinition.type)">
This works just fine, title, selectAllText and deselectAllText all work and are in the right language.
Then I want to change the text. I updated the data-attributes and tried this:
const $selectPickers = $('.selectpicker') as any;
$selectPickers.selectpicker('render');
$selectPickers.selectpicker('refresh');
This didn't do anything. So I tried this:
$selectPickers.selectpicker({
title: await this.translateService.get('select.none').toPromise(),
selectAllText: await this.translateService.get('select.all').toPromise(),
deselectAllText: await this.translateService.get('select.none').toPromise()
});
$selectPickers.selectpicker('render');
$selectPickers.selectpicker('refresh');
This did change the title, but not selectAllText and deselectAllText. I also tried $selectPickers.selectpicker('destroy'); but it also didn't help. Also not using the data attributes at all didn't help.
hi.
in my case data- attributes don't work at all.
so i use $('.selectpicker').selectpicker({ selectAllText: 'mytext', deselectAllText: 'mytext' }).selectpicker('reneder').selectpicker('refresh');