How can I set the initial value of Select2 when using AJAX?
I have a select2 v4.0.0 being populated from an Ajax array. If I set the val of the select2 I can see via javascript debugging that it has selected the correct item (#3 in my case), however this is not shown in the select box, it is still showing the placeholder.
Whereas I should be seeing something like this:
In my form fields:
<input name="creditor_id" type="hidden" value="3">
<div class="form-group minimal form-gap-after">
<span class="col-xs-3 control-label minimal">
<label for="Creditor:">Creditor:</label>
</span>
<div class="col-xs-9">
<div class="input-group col-xs-8 pull-left select2-bootstrap-prepend">
<select class="creditor_select2 input-xlarge form-control minimal select2 col-xs-8">
<option></option>
</select>
</div>
</div>
</div>
My javascript:
var initial_creditor_id = "3";
$(".creditor_select2").select2({
ajax: {
url: "/admin/api/transactions/creditorlist",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
c_id: initial_creditor_id,
page: params.page
};
},
processResults: function (data, page) {
return {
results: data
};
},
cache: true
},
placeholder: "Search for a Creditor",
width: "element",
theme: "bootstrap",
allowClear: true
}).on("select2:select", function (e) {
var selected = e.params.data;
if (typeof selected !== "undefined") {
$("[name='creditor_id']").val(selected.creditor_id);
$("#allocationsDiv").hide();
$("[name='amount_cash']").val("");
$("[name='amount_cheque']").val("");
$("[name='amount_direct']").val("");
$("[name='amount_creditcard']").val("");
}
}).on("select2:unselecting", function (e) {
$("form").each(function () {
this.reset()
});
("#allocationsDiv").hide();
$("[name='creditor_id']").val("");
}).val(initial_creditor_id);
How can I make the select box show the selected item rather than the placeholder? Should I be sending this as part of the AJAX JSON response perhaps?
In the past, Select2 required an option called initSelection that was defined whenever a custom data source was being used, allowing for the initial selection for the component to be determined. This worked fine for me in v3.5.
Solution 1:
You are doing most things correctly, it looks like the only problem you are hitting is that you are not triggering the change method after you are setting the new value. Without a change event, Select2 cannot know that the underlying value has changed so it will only display the placeholder. Changing your last part to
.val(initial_creditor_id).trigger('change');
Should fix your issue, and you should see the UI update right away.
This is assuming that you have an <option> already that has a value of initial_creditor_id. If you do not Select2, and the browser, will not actually be able to change the value, as there is no option to switch to, and Select2 will not detect the new value. I noticed that your <select> only contains a single option, the one for the placeholder, which means that you will need to create the new <option> manually.
var $option = $("<option selected></option>").val(initial_creditor_id).text("Whatever Select2 should display");
And then append it to the <select> that you initialized Select2 on. You may need to get the text from an external source, which is where initSelection used to come into play, which is still possible with Select2 4.0.0. Like a standard select, this means you are going to have to make the AJAX request to retrieve the value and then set the <option> text on the fly to adjust.
var $select = $('.creditor_select2');
$select.select2(/* ... */); // initialize Select2 and any events
var $option = $('<option selected>Loading...</option>').val(initial_creditor_id);
$select.append($option).trigger('change'); // append the option and update Select2
$.ajax({ // make the request for the selected data object
type: 'GET',
url: '/api/for/single/creditor/' + initial_creditor_id,
dataType: 'json'
}).then(function (data) {
// Here we should have the data object
$option.text(data.text).val(data.id); // update the text that is displayed (and maybe even the value)
$option.removeData(); // remove any caching data that might be associated
$select.trigger('change'); // notify JavaScript components of possible changes
});
While this may look like a lot of code, this is exactly how you would do it for non-Select2 select boxes to ensure that all changes were made.
Solution 2:
What I've done is more clean and needs to make two arrays :
- one contains a list of Object with id and a text (in my case its id and name, depending of your templateResult) (its what you get from ajax query)
- the second is only an array of ids (selection value)
I initialize select2 using the first array as data, and the second as the val.
An example function with as parameters a dict of id:name.
function initMyList(values) {
var selected = [];
var initials = [];
for (var s in values) {
initials.push({id: s, name: values[s].name});
selected.push(s);
}
$('#myselect2').select2({
data: initials,
ajax: {
url: "/path/to/value/",
dataType: 'json',
delay: 250,
data: function (params) {
return {
term: params.term,
page: params.page || 1,
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
minimumInputLength: 1,
tokenSeparators: [",", " "],
placeholder: "Select none, one or many values",
templateResult: function (item) { return item.name; },
templateSelection: function (item) { return item.name; },
matcher: function(term, text) { return text.name.toUpperCase().indexOf(term.toUpperCase()) != -1; },
});
$('#myselect2').val(selected).trigger('change');
}
You can feed the initials value using ajax calls, and use jquery promises to do the select2 initialization.
Solution 3:
It's works for me ...
Don't use jQuery, only HTML: Create the option value you will display as selected. If ID it's in select2 data it will selected automatically.
<select id="select2" name="mySelect2">
<option value="mySelectedValue">
Hello, I'm here!
</option>
</select>
Select2.org - Default Pre Selected values
Solution 4:
One scenario that I haven't seen people really answer, is how to have a preselection when the options are AJAX sourced, and you can select multiple. Since this is the go-to page for AJAX preselection, I'll add my solution here.
$('#mySelect').select2({
ajax: {
url: endpoint,
dataType: 'json',
data: [
{ // Each of these gets processed by fnRenderResults.
id: usersId,
text: usersFullName,
full_name: usersFullName,
email: usersEmail,
image_url: usersImageUrl,
selected: true // Causes the selection to actually get selected.
}
],
processResults: function(data) {
return {
results: data.users,
pagination: {
more: data.next !== null
}
};
}
},
templateResult: fnRenderResults,
templateSelection: fnRenderSelection, // Renders the result with my own style
selectOnClose: true
});
Solution 5:
The issue of being forced to trigger('change') drove me nuts, as I had custom code in the change trigger, which should only trigger when the user changes the option in the dropdown. IMO, change should not be triggered when setting an init value at the start.
I dug deep and found the following: https://github.com/select2/select2/issues/3620
Example:
$dropDown.val(1).trigger('change.select2');