Set dữ liệu trong Select2 sau khi chèn với AJAX

Question

Tôi đang sử dụng các Select2 với AJAX (mã dưới đây):

$(".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 
    }); 

Vâng, nếu không tìm thấy khách hàng, người dùng có thể sử dụng một nút để mở một phương thức và thêm khách hàng mới, có thể sử dụng trả về (json với id và namae) của khách hàng mới và đặt dữ liệu (như tên) vào select2 như được chọn không?

$('.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

Tôi đã cố gắng làm cho nó hoạt động. Sau POST trong jQuery, tôi nhận được một JSON với các dữ liệu mới và thiết lập các đầu vào ẩn và chọn ('.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

Bắt đầu từ năm v4.x, Select2 không còn sử dụng ẩn input lĩnh vực . Thay vào đó, bạn create a new Option và thêm nó vào yếu tố select của bạn:

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

Sự kết hợp của true luận và trigger('change') sẽ đảm bảo bạn mới <option> được chọn tự động sau khi được bổ sung.

Xem codepen của tôi để biết ví dụ hoàn chỉnh.