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

【问题标题】：JQuery Select2 does not display properly inside bootbox dialog modalJQuery Select2 在引导框对话框模式中无法正确显示
【发布时间】：2017-02-22 07:59:48
【问题描述】：

当我在页面上使用 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();选择下拉列表变为常规下拉列表。但我不知道为什么它显示不正确。

【问题讨论】：

覆盖在模式上注册事件的enforceFocus()。 $.fn.modal.Constructor.prototype.enforceFocus = function() {};
此解决方案无效。但是，当我在表单中复制 .css 文件时，它起作用了！为什么这是必要的？
Select2 需要应用它的元素可见。您需要在 shown.bs.modal 事件的处理程序中移动 $('.boop').select2();（显示n，不显示 - 显示在模态变为可见之前处理）。
问题不是 $('.boop').select2();这在显示的.bs.modal 内部或外部都有效。真正的问题是无法“看到”select2 css 文件。当我将它包含在它们的形式中时，它就起作用了！我不知道为什么它无法从页面的部分读取它。

标签： select2 bootbox

【解决方案1】：

不久前我也遇到过同样的情况，我设法解决了这个问题：

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

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

【讨论】：

这应该是答案。谢谢！
谢谢。这有助于 select2 开始注册击键。

【解决方案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');

【讨论】：

谢谢 - 这有助于正确初始化 select2。下面的答案有助于解决击键未注册的问题。

【解决方案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();

    })

【讨论】：

请简要介绍一下你做了什么特别的事情。
请不要发布仅代码的答案，包括解释和背景。
一个好的答案有一个更好的解释How do I write a good 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>

【讨论】：