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

Posted 2023-05-07

【中文标题】当不在 jquery 模态对话框中时，select2 插件可以正常工作

【英文标题】：select2 plugin works fine when not inside a jquery modal dialog

【发布时间】：2013-06-02 16:36:58

【问题描述】：

我在 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;
        );

我在其他页面中有相同的代码，它可以工作。

任何帮助将不胜感激，

谢谢 詹姆

【参考方案1】：

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

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

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

【讨论】：

在最新版本的 select2 中（我在 4.0.3 上测试过），将 '.select2-drop' 替换为 '.select2-dropdown'

【参考方案2】：

一个简单的方法：

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

在你设置 select2 之后添加这个

【参考方案3】：

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

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

【参考方案4】：

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

干杯 詹姆斯

【讨论】：

该链接有很多不同的建议解决方案/解决方法。很难破译什么是所有这些中最好的解决方案。 （没有像 SO 那样的投票）。你能分享一下什么特别适合你吗？

这些解决方案都不适合我。你能告诉我你试过[或结合]哪个有效吗？

【参考方案5】：

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

【参考方案6】：

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

在与这个问题斗争了一段时间后，我发现了另一个选项，可以让您将对话框保持为模态。如果您将 select2 的 css 修改为如下所示：

 .select2-drop 
    z-index: 1013;


.select2-results 
    z-index: 999;


.select2-result 
    z-index: 1010;

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

【参考方案7】：

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

 $('#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）

【参考方案8】：

在你的 select2() 声明之后添加它。

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

【参考方案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();
            
        );
    

【参考方案10】：

我可以通过从对话框选项中删除选项“modal: true”来解决此问题。 效果很好。

【参考方案11】：

对于任何使用 Select2 v4.0.12 遇到此问题的人

我使用的是 Select2 选项 dropdownParent

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

dropdownParent: $("#ReportFilterDialog")

为我解决的问题是将值设置为，以选择模式对话框的外层：

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