JQuery Select2 не отображается должным образом в модальном диалоговом окне загрузочного окна

У меня была такая же ситуация некоторое время назад, и мне удалось решить ее с помощью этого:

dialog.on('shown.bs.modal', function() {
  dialog.removeAttr("tabindex");
});

где dialog - мой модальный диалог загрузчика. Вам просто нужно удалить атрибут tabindex из самого диалога. Таким образом, он будет работать так, как ожидалось (как на обычной странице).

Я просто буду работать, если вы инициализируете свой компонент select2 методом «show.bs.modal»:

bootbox.dialog({
                title: dialogTitle,
                message: $('#altForm'),
                onEscape: true,
                show: false // We will show it manually later
            }).on('shown.bs.modal', function () {
                $('.boop').select2(); <---- Place it in here!!!
                $('#enterBtn').hide();
                $('#userPwd').hide();
                $('.app-ctrl').prop('disabled', true);
                $('#altForm').show();
            }).on('hide.bs.modal', function (e) {
                $('#altForm').hide().appendTo('body');
            }).modal('show');
            $('.boop').parents('.bootbox').removeAttr('tabindex');

У меня была такая же ошибка, это было решение для моего

  on('shown.bs.modal', function() {
    $('#estacion').select2({ //includ the function select 2 on show modal
      width: "100%",//i put width 100% to show in all the modal
      dropdownParent: $('#sistemas')//this is the solucion to show the select options, my select2 is inside a table whit id sistamas 
     });
  })

Весь код

  $("#idbutton").on("click", function(e) {
   let url = $("#base_url").val() + "example/example/urlBootbox";
   $.get(url, {}, function(data) {

  modalPrenomina = bootbox.confirm({
    title: "Registrar Prenomina",
    message: $(data),
    size: "middle",
    show: false,
    buttons: {
      confirm: {
        label: '<span class="glyphicon glyphicon-floppy-saved" ></span> Guardar',
        className: 'btn-sm btn-primary btn-sm'
      },
      cancel: {
        label: '<span class="glyphicon glyphicon-remove" style="margin-right:5%;"></span> Cancelar',
        className: 'btn-sm btn-default btn-sm'
      }
    },
    callback: function(result) {

      if (result) {
        $("#frmPrenomina").submit();
        return false;
      }
    }
  }).on('shown.bs.modal', function() {
 
    $('#estacion').select2({
      width: "100%",
      dropdownParent: $('#sistemas')
     });
    



  }).on('hide.bs.modal', function(e) {

  }).modal('show');
})
})

HTML-код

    <table class="table table-striped tooltip-demo" id="sistemas" style="margin-bottom: 0px;">
        <tbody>
            <div class="col-sm-12">
                <h3 class="m-t-none m-b"></h3>
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class=" form-group  "><label class="col-sm-12 col-form-label">Empresa *</label>
                            <div class="col-sm-12">
                                <div class="inputGroupContainerfrm inputGroupContainer">
                                    <div class="input-group" id="divSelectE">
                                        <span class="input-group-addon" id="style_spam_empresa"><i class="fa fa-building"></i></span>
                                        <select class="chosen-select" id="estacion" name="estacion"  onChange="myChangeEstacion(this);">
                                            <option value="" disabled selected>Elige una opción</option>
                                            <?php foreach ($estaciones as $item) : ?>
                                                <option value="<?php echo $item->id ?>"><?php echo $item->alias ?></option>
                                            <?php endforeach;  ?>
                                        </select>
                                    </div>
                                </div>
                                <br>
                            </div>
                        </div>
                    </div>
                    <!--
                        Nota: Se va descomentar esta linea cuando se implemente lo de los departamentos
                              y se va incluir esta linea dentro de la etiqueta select onChange="revisarDocumento(this);" y se va quitar onChange="myChangeEstacion(this);"
                         <div class="depa" id="depa">
                    </div> -->
                </div>
        </tbody>
    </table>