-
Notifications
You must be signed in to change notification settings - Fork 96
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Setting the selected value initially and doing a search, shows empty "currently selected" #177
Comments
This sounds like a legit bug. Will have to look into it more at some point. |
I'm also affected by this - it also means you can't recycle the select picker when toggling an "edit" mode in a UI (i.e. clicking "edit" on a page which displays the editing fields dynamically). If you don't need to recycle the select picker, you can set a default value like this:
|
@ppazos I've got a complete workaround for this now. For updating the selected values manually, you can use the following code
|
Based on @Humni 's response, I tweaked it and made it into a jQuery function: $.fn.ajaxSelectPickerRefresh = function(){
return this.each(function () {
if(!$(this).data('AjaxBootstrapSelect')) return;
var picker = $(this).data('AjaxBootstrapSelect');
var selected = [];
var selectValues = picker.$element.find('option:selected');
for(var i=0;i<selectValues.length;i++){
selected.push({
value: selectValues[i].value,
text: selectValues[i].text,
class: "",
data: {},
preserved: true,
selected: true
});
}
picker.list.selected = selected;
});
} Then it can be used as such: |
@quaternion7 should that be a PR to solve the issue? |
@quaternion7 I've used that function and it's solved my issue, but the |
@calumshep did solve my problem. |
Can confirm that @demetris-manikas addition to @quaternion7's solution fixes this! $.fn.ajaxSelectPickerRefresh = function(){
return this.each(function () {
if(!$(this).data('AjaxBootstrapSelect')) return;
var picker = $(this).data('AjaxBootstrapSelect');
var selected = [];
var selectValues = picker.$element.find('option:selected');
for(var i=0;i<selectValues.length;i++){
selected.push({
value: selectValues[i].value,
text: selectValues[i].text,
class: "",
data: {},
preserved: true,
selected: true
});
}
picker.list.selected = selected;
picker.list.replaceOptions(selected);
});
} |
thanks @calumshep, i made some adjustements to your code: $.fn.ajaxSelectPickerRefresh = function () {
return this.each(function () {
var picker = $(this).data('AjaxBootstrapSelect');
if (!picker) {
return;
}
var selected = [];
var selectValues = picker.$element.find('option:selected');
for (var i = 0; i < selectValues.length; i++) {
selected.push({
value: selectValues[i].value,
text: selectValues[i].text,
'class': '',
data: {},
preserved: picker.options.preserveSelected,
selected: true
});
}
picker.list.selected = selected;
picker.list.replaceOptions(selected);
// clear status text
picker.list.setStatus();
});
}; |
I have set the selected value on the select picker:
$('#myselect').selectpicker('val', '1');
I can see the correct option selected by default (though in the DOM the correspondent select option doesn't have the selected attribute).
Then I click on the select and to a search via AJAX, and the result says "Currently selected" showing no value, even though I didn't click on any result so I expect "Currently selected" to be the one initially set.
The text was updated successfully, but these errors were encountered: