Set data in Select2 after insert with AJAX

Question

i\'m using the Select2 with AJAX (the code below):

$(\".select2-ajax\").select2({
        placeholder: \"Search user\",
        minimumInputLength: 1,
        aj         


        

Answer 1

Starting in v4.x, select2 no longer uses the hidden input field. Instead, you create a new Option and append it to your select element:

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

The combination of the true arguments and trigger('change') will make sure your new is automatically selected after being added.

See my codepen for a complete working example.