select2 - 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();选择下拉菜单变成了常规下拉菜单。但我不知道为什么它显示不正确。

Answer 1

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

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

哪里 dialog是我的引导箱模式对话框。您只需要删除 tabindex来自对话框本身的属性。这样它就会按预期工作(就像在普通页面中工作一样)。