I see this has been asked couple of times here, but none of them work for me. So i'm positing it again to see if someone faced something like this. I have a select2 inside a Model, and was able to populate it by making an ajax call to the Api. It works like a charm until here, problem is i'm not able to select any value into the 'Code'. Below is my code for the ajax and html
/ HTML /
<div class="col-lg-8 col-sm-7">
<input id="procedureSelect" name="SelectProcedure" class="form-control">
</div>
/*Ajax Call */
$('#procedureSelect').select2({
placeholder: 'Select Procedure',
allowClear: true,
quietMillis: 1000,
ajax: {
url: '@Url.Action("GetProcedures", "Procedure")',
dataType: 'json',
data: function (term, page) {
return {
searchTerm: term,
page: page
};
},
results: function (data, page) {
var more = (page * 25) < data.total;
return { results: data.procedureData, more: more };
}
},
formatResult: function (data) {
return '<div>' + data.procedure_code + " - " + data.short_description + '</div>';
},
formatSelection: function (data) {
var result = data.procedureData;
return result.procedure_code;
}
});
I finally figured out the answer, by doing some more research. The Thing is select2 expects a unique Id for the data returned. So o added below one line of code to my javascript to assign the Id
id: function (data) { return data.procedure_code; },
Now it works fine.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.