Sets Daten in Select2 nach Einsatz mit AJAX

Question

Ich verwende den Select2 mit AJAX (der Code unten):

$(".select2-ajax").select2({ 
     placeholder: "Search user", 
     minimumInputLength: 1, 
     ajax: { 
      url: $('#url-search-client').val(), 
      dataType: 'json', 
      type: 'post', 
      data: function (term, page) { 
      return { 
       filter: term 
      }; 
      }, 
      results: function (data, page) { 
      return {results: data}; 
      } 
     }, 
     width : '50%', 
     formatInputTooShort: function() {return 'Informe mais caracteres'; }, 
     formatResult: formatResultSelectAjax, // omitted for brevity, see the source of this page 
     formatSelection: formatSelectAjaxValue, // omitted for brevity, see the source of this page 
     dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller 
    }); 

Nun, wenn nicht Client gefunden, kann der Benutzer eine Taste benutzen, einen modalen zu öffnen und füge den neuen Client hinzu, ist es möglich, die Rückgabe (json mit id und namae) des neuen Clients zu verwenden und die Daten (wie den Namen) in select2 wie ausgewählt zu setzen?

$('.btn-form-client').click(function() { 
     $.ajax({ 
      url: $('#frm-client').attr('action'), 
      dataType: 'json', 
      type: 'post', 
      data: $('#frm-client').serialize() 
     }).done(function (data) { 
      $('#modal-client').modal('hide') 
     }); 
     return false; 
    }); 

Answer 1

Ich schaffte es, es zu arbeiten. Nach dem POST in jQuery, erhalte ich eine JSON mit den neuen Daten und stellen Sie den versteckten Eingang und die select ('.select2-Ajax')

$('#client=id').val(data.id); 
$('#modal-solicitante').modal('hide'); //This is my 
$(".select2-ajax").select2('data', {id: data.id, name: data.name, email: data.email}); 

Answer 2

in v4.x Ab select2 nicht mehr verwendet das versteckte input Feld . Stattdessen Sie create a new Option und hängen Sie ihn an Ihr select Element:

var newOption = new Option(data.name, data.id, true, true); 
$(".select2-ajax").append(newOption).trigger('change'); 

Die Kombination der true Argumente und trigger('change') wird sicherstellen, dass Ihre neue <option> automatisch ausgewählt, nachdem hinzugefügt werden.

Einen vollständigen Arbeitsbeispiel finden Sie unter codepen.