Select2 text selected cannot be seen using jquery

,Good Morning everybody, In a modal window I have a select2 that is filled by ajax, using jquery I select a value which performs it perfectly but I cannot see the value of the text.
In Chrome I see that in the span select2-selection__rendered it only creates it as title but not within it:

<span class="select2-selection__rendered" id="select2-editarPasoTipoTramiteTipoTramite-container" role="textbox" aria-readonly="true" title="CIVIL JUICIO EJECUTIVO"><span class="select2-selection__clear" title="Remove all items" data-select2-id="4">×</span></span>

But when I select another value if it works

<span class="select2-selection__rendered" id="select2-editarPasoTipoTramiteTipoTramite-container" role="textbox" aria-readonly="true"><span class="select2-selection__clear" title="Remove all items" data-select2-id="44">×</span>PENAL CONTRAVENCIONES</span>

This is the jquery code that I use to select the value of the select2, and I used various options like select2.trigger.change, add the modal to the select when I instantiate it but I can’t see the text when I do it with jquery.

$(document).on("click", ".btnEditarPasoTipoTramite",function(){

  var id = $(this).attr("id");
  var datos = new FormData();



    url : "ajax/pasos.ajax.php",
    method : "POST",
    data : datos,
    cache : false,
    contentType : false,
    processData : false,
    dataType : "json",
    success: function(response){
    /* ADD selected value to SELECT2*/  
    $("#editarPaso").html('<option value="'+response["paso"]+'" selected>'+response["tipo"]+'</option>');

      /* tried with another scripts to add the select value but is the same problem */
      //$('#editarPaso').select2({val: [{id: response["paso"], text: response["tipo"]}]});

    //var $newOption = $("<option selected='selected'></option>").val("TheID").text("The text")
     /* tried manually add the text value to span but don't working */




/* CODE to fill the Select2 with ajax*/


  dropdownParent: $('#modalEditar'),
  theme: "bootstrap4",
  placeholder: 'Tipo Trámite',
  minimumInputLength: 3,
  ajax: {
    url: SERVERURL+'ajax/select2.ajax.php',
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term, // search term
    processResults: function (data, params) {
    = || 1;
      return {
        //results: data
        results: data,
        pagination: {
          more: ( * 30) < data.total_count
    cache: false
  allowClear: true,
  language: "es",
  escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
  templateResult: setTipoTramEdit,
  templateSelection: setTipoTramEditSelection


function setTipoTramEdit (tipoTramEdit) {
    if (! { return tipoTramEdit.tipoTramDesc; }
    var $tipoTramEdit = $("<div class='clearfix'>"+
                          "<i class='fas fa-layer-group mr-2'></i>"+tipoTramEdit.mateCausJudi+
                        "<div><div class='select2-result-repository__title'><strong>"+tipoTramEdit.tipoTramDesc+"</strong></div></div></div>");
    return $tipoTramEdit;

function setTipoTramEditSelection (tipoTramEdit) {

  return (tipoTramEdit.tipoTramDesc)?tipoTramEdit.tipoTramDesc.substr(0,30):tipoTramEdit.tipoTramDesc;


$(document).on('select2:select', '#editar', function(e) {

  var tipoTramEdit =;

Version Select2 4.0.13

I have the same problem, have you managed to solve it?

My case: StackOverflow question