Default Values on AJAX calling ,after submit show Undefined values for those default values only

Hi ,

I am using Select2 as multiple select with Ajax Call because it is a big data and it shouldnot load into the page , sometime end user want to edit this data , lets says we have Users(more than 10,000 users) , Message ,SharedMessageUsers tables (Messages and Users has many to many relation) , i want to share Message with different users , so i click on share button and open a form with Select2 input , i type the name of a user Ajax call will brought data and i select it ,i can select multiple users , then once i click submit all the select User(s) will saved to the table SharedMessaheUsers this scenario working perfect ,now if i want to “Update” to whom i should share this “message” , i open the Share Screen and shows me the Select2 Input with already shared users ,all that is working to this point as the code below , the problem here , when i call function clickMe() ,only new select items will be available ,the default values has the “Undefined” values as this images here

how can i resolve this issue

thank you

following HTML code

<select class="js-example-data-ajax" name="dffdf" id="dffdf" style="width: 100%" multiple="multiple"></select>

<button onclick="clickMe()">Submit</button>

and this is Javascript code,

                              function clickMe() {

                              $(document).ready(function() {
                                  var selectedUsers = [];
                                  var $element = $(".js-example-data-ajax").select2({
                                      dir: "rtl",
                                      ajax: {
                                          url:' URL OF AJAX CALL',
                                          type: "post",
                                          dataType: 'json',
                                          delay: 250,
                                          data: function(params) {
                                              return {
                                                  searchText: params.term,
                                          processResults: function(data, params) {
                                     = || 1;
                                              return {
                                                  results: $.map(data.Items,
                                                      function(item) {
                                                          return {
                                                              text: item.Info,
                                                              id: item.EmpId
                                                  pagination: {
                                                      more: ( * 30) < data.TotalCount
                                          cache: true
                                      placeholder: 'Search for an employee',
                                      minimumInputLength: 6,
                                  var $request = $.ajax({
                                      url: 'URL OF AJAX CALL FOR SAVED DATA'

                                  $request.then(function(data) {
                                      for (var d = 0; d < data.length; d++) {
                                          var item = data[d];
                                          var option = new Option(item.Name,, true, true);

                                      function(e) {

To get the currently selected values from a Select2, you should call the Select2 data API instead of retrieving the value of the underlying HTML <select>.

Thanks John ,

as i am using Razor in MVC 5 i found the solution as the follow :
first i got the select options from database in options varible (c# code)
var options = new List();
foreach (var msgEmployee in Model.ShareMessageEmployees)
options.Add([email protected]"$element.append(’<option value=""{msgEmployee.EmpId}"" selected="“selected”">{msgEmployee.Employee.Name}’)");
then i printed option list of pre-selected option in the script section as string delimited with ; character

  @if (options.Any())

then i call trigger change

Hi, Osama–

I don’t know anything baout Razor, so I’m glad you were able to figure it out.

Good luck with the rest of your project.