Question

我在jquery对话框中使用select2插件但是没有用。下降时，焦点移动到输入控件但立即离开它，不允许我输入任何内容。

这是HTML：

<div id="asignar_servicio" title="Asignar servicios a usuarios">
    <input type="hidden" class="bigdrop" id="a_per_id" />
</div>

这是javascript代码：

        $( "#asignar_servicio" ).dialog({
            autoOpen: false,
            height: 500,
            width: 450,
            modal: true,
            buttons: {
                "Cancelar": function () {
                    $('#asignar_servicio').dialog('close');
                }
            }
        });
        $("#a_per_id").select2({
            placeholder: "Busque un funcionario",
            width: 400,
            minimumInputLength: 4,
            ajax: {
                url: "@Url.Action("Search", "Personal")",
                dataType: 'json',
                data: function (term, page) {
                    return {
                        q: term,
                        page_limit: 10,
                    };
                },
                results: function (data, page) {
                    return { results: data.results };
                }
            }
        }).on("change", function (e) {
            var texto = $('lista_personal_text').val().replace(/ /g, '');
            if (texto != '')
                texto += ',';
            texto += e.added.text;

            var ids = $('lista_personal_id').val().replace(/ /g, '');
            if (ids != '')
                ids += ',';
            ids += e.added.id;
        });

我在其他页面中使用相同的代码并且它可以正常工作。

任何帮助将不胜感激，

感谢海梅

Answer 1

jstuardo的链接很好，但在该页面上有很多要筛选的内容。这是您需要的代码：

$.ui.dialog.prototype._allowInteraction = function(e) {
    return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-drop').length;
};

只需将其添加到您设置select2下拉列表的任何位置旁边。

Answer 2

一种简单的方法：

$.ui.dialog.prototype._allowInteraction = function (e) {
    return true;
};

在您设置select2

之后添加此项

Answer 3

或者试试这个： Select2 doesn't work when embedded in a bootstrap modal

从模态div中删除tabindex="-1"

Answer 4

我找到了这个解决方法。 https://github.com/ivaynberg/select2/issues/1246

干杯詹姆斯

Answer 5

我找到的最佳解决方案是通过删除modal：true来使对话框不是模态对话框。完成此操作后，页面将按照需要运行。

经过一段时间与此争斗后，我找到了另一个选项，允许您将对话框保持为模态。如果您将select2的css修改为以下内容：

 .select2-drop {
    z-index: 1013;
}

.select2-results {
    z-index: 999;
}

.select2-result {
    z-index: 1010;
}

请记住，如果你在同一页面上打开很多对话框，它最终会超过指定的z-index，但是在我的用例中这些数字完成了工作。

Answer 6

没有足够的声誉来评论之前的帖子，但我想添加这段代码：

 $('#dialogDiv').dialog({
                title: "Create Dialog",
                height: 410,
                width: 530,
                resizable: false,
                draggable: false,
                closeOnEscape: false,
                //in order for select2 search to work "modal: true" cannot be present. 
                //modal: true,
                position: "center",
                open: function () { },
                close: function () { $(this).dialog("distroy").remove(); }
            });
$("#displaySelectTwo")select2();

目前，我们的应用程序中无法更新到更新版本的JQuery和Select2。（使用JQueryUI v1.8和Select2 v1）

Answer 7

在select2（）声明后添加。

$.ui.dialog.prototype._allowInteraction = function (e) {
    return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-dropdown').length;
};

Answer 8

github issue thread about this problem中有一个针对select2 4.0的新修补程序：

if ($.ui && $.ui.dialog && $.ui.dialog.prototype._allowInteraction) {
    var ui_dialog_interaction = $.ui.dialog.prototype._allowInteraction;
    $.ui.dialog.prototype._allowInteraction = function(e) {
        if ($(e.target).closest('.select2-dropdown').length) return true;
        return ui_dialog_interaction.apply(this, arguments);
    };
}

在创建其中包含select2的任何模态对话框之前运行它。

JSFiddle of this fix in action

Answer 9

我成功使用了以下修复程序：

$.fn.modal.Constructor.prototype.enforceFocus = function () {
        var that = this;
        $(document).on('focusin.modal', function (e) {
            if ($(e.target).hasClass('select2-input')) {
                return true;
            }

            if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
                that.$element.focus();
            }
        });
    }

Answer 10

我可以通过从对话框选项中删除选项：'modal：true'来解决这个问题它运作良好。

Answer 11

对于那些对Select2 v4.0.12感到困惑的人

我正在使用Select2选项dropdownParent

我设置了dropDownParent值，但仍然有问题。

dropdownParent: $("#ReportFilterDialog")

为我修复的问题是将值设置为选择模态对话框的外层：

dropdownParent: $("#ReportFilterDialog").parent()

当不在jquery模式对话框中时，select2插件工作正常

11 个答案: