JQuery Select2 在引导框对话框模式中无法正确显示

Question

当我在页面上使用 JQuery Select2 时，它工作正常。但是，当它位于引导框对话框模态内时，它无法正确显示。

这是我正在使用的 jquery 代码...

$.ajax({
        type: 'GET',
        url: src,
        success: function (data) {
            if (allowed) {
                bootbox.dialog({
                    title: dialogTitle,
                    message: $('#altForm'),
                    onEscape: true,
                    show: false // We will show it manually later
                }).on('shown.bs.modal', function () {
                    $('#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');
                $('.boop').select2();
            }
        }
    });

我相信 Select2 下拉列表的代码是有效的，因为当我注释掉初始化行时：$('.boop').select2(); select 下拉菜单变为常规下拉菜单。但是不知道为什么显示不正确

Answer 1

前段时间我遇到了同样的情况，我设法解决了这个问题：

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

其中 dialog 是我的引导框模式对话框。您只需要从对话框本身中删除 tabindex 属性。这样它将按预期工作（就像它在正常页面中工作一样）。

Answer 2

如果您在 "shown.bs.modal" 方法上初始化您的 select2 组件，我就会工作：

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');

Answer 3

   var box =  bootbox.dialog({
       message:"<div class='col-md-4 form-group m-t-menos-15'>" +
       "            <div class='input-group'>" +
       "                <label class='control-label' for='motivo'>Motivo</label>" +
       "                <select class='select-2 motivo_cancela' id='motivo' name='motivo'>" +
       "                    <option> 1</option>" +
       "                    <option> 2</option>" +
       "                </select>" +
       "            </div>" +
       "          </div>",
       title: "Cancelamento da viagem",
       animate: true,
       buttons: {
           'confirm': {
               label: 'Confirmar',
               className: 'btn-info '
           },
           'cancel': {
               label: 'Fechar',
               className: 'btn-danger'
           }
        },
        callback: function(result) {
                if (result) {
                    sendPostRequest(
                        'solicitacaomonitoramento/cancelar',
                        {id: data.id},
                        function (xhr) {
                            BootstrapAlert.success(xhr.msg);
                            tabelaSolicitacaoMonitoramento.ajax.reload();
                        },
                        function (xhr) {
                            var erros = $.parseJSON(xhr.responseText);
                            BootstrapAlert.error(erros.erro);
                        }
                    );
                }
        }
   });

    box.on('shown.bs.modal', function(){
        $('.motivo_cancela').select2();

    })

Answer 4

我遇到了同样的错误，这是我

的解决方案

  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>

JQuery Select2 在引导框对话框模式中无法正确显示

JQuery Select2 does not display properly inside bootbox dialog modal

bootbox

select2