Select2 initSelection文本值未显示

Question

我一直在查看其他一些SO试图用我的代码解决问题的问题......我使用<input type='hidden' ...></input>字段来存储所选个人的ID在 jQuery select2 下拉列表中。当我返回页面时，我想要显示的最后一个人的姓名。我可以保存value属性，并且当下拉列表展开时 - 选择正确的名称。但是，实际名称不会显示;只是一个空的select

这是我的初始化。 approvers param是一个带有个人列表的JSON obj

var self = this;

self.supervisorsDDL.select2({
  placeholder: "Select Supervisor",
  minimumInputLength: 0,
  width: 150,
  data: {
    results: approvers.Data,
    text: 'FullName',
    id: 'EmployeeID'
  },
  id: function (e) {
    if (e)
      return e.EmployeeID;
  },
  formatResult: function (e) {
    if (e)
      return e.FullName;
  },
  formatSelection: function (e) {
    if (e)
      return e.FullName;
  },
  initSelection: function (item, callback) {
    if (item.val() > 0) {
      var eid = item.val();
      var name, obj;
      $.get(
        self.jsonUrl,
        { method: "GetApproverNameByEmployeeId", employeeId: eid },
        function (data, textStatus) {
          if (data.Success) {
            name = data.Data;
          }
        }
      );
      obj = { EmployeeID: eid, FullName: name };
      callback(obj);
    }
  } // Set the ID for initSelection
}).select2("val", self.selectedItemHidden.val());

supervisorsDDL和selectedItemHidden都是隐藏字段，使用value属性来保存ID。冗余是的，但更容易，节省了手头任务的时间。

Answer 1

在ajax响应处理程序中设置名称值之前，您正在调用回调。将两条线移到那里，应该没问题。

initSelection: function (item, callback) {
    if (item.val() > 0) {
      var eid = item.val();
      var name, obj;
      $.get(
        self.jsonUrl,
        { method: "GetApproverNameByEmployeeId", employeeId: eid },
        function (data, textStatus) {
          if (data.Success) {
            name = data.Data;
            //call the callback now that the ajax data is ready
            obj = { EmployeeID: eid, FullName: name };
            callback(obj);
          }
        }
      );
      // moved
      //obj = { EmployeeID: eid, FullName: name };
      //callback(obj);
    }
  }

以下是我的一个项目的工作示例：

initSelection: function (element, callback) {
  var id = '@Model.Id';
  if (id === null) return;
  $.getJSON('@Url.HttpRouteUrl("DefaultApi", new { controller = "Search" })', {
    'id': id
   }, function (data) {
     //called in the ajax handler
     callback(data);
   });
 }