3

我一直在使用 select2 插件一段时间，直到现在它是完美的。

我有一个页面，其中包含 3 个正在加载数据且运行良好的选择，以及弹出窗口内的多个选择。它们看起来不错，但您不能在搜索字段上写字。在主页上搜索运行良好，所以我无法弄清楚是什么问题..

我正在使用用于弹出窗口的 blockUI 插件。我已经尝试过 z-index，销毁并在 blockUI 函数的回调上启动插件，但没有任何效果，我不知道为什么。

编码：

<!doctype html>
<html>
<head>
<title>ff</title>
<link type="text/css" rel="stylesheet" href="http://cdn.jsdelivr.net/select2/3.2/select2.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/select2/3.2/select2.js">    </script>
<script type="text/javascript" src="http://xiao3meng.googlecode.com/files/jquery.blockUI.js"></script>
<script>
    $(document).ready(function() {
        $(".startselect").select2();

        $('#clickstartpopup').click(function() { 
            $.blockUI({ 
                message: $('#popblock'),
                onBlock: function() { 
                    $(".popupselect").select2();

                }
            });
        });

    });
</script>
</head>
<body>
<div id="maincontent1" class="maincontent mywebsitepage">
  <select  class="startselect" id="merchantList">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
</select>
</div>
<div style="clear: both; height: 15px;"></div>
<span id="clickstartpopup" style="cursor: pointer;color:red;" >click me!</span>
<div style="height: 300px;background-color: red;display:none;" id="popblock" >
<select class="popupselect">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
</select>
</div>
</body>
</html>


有什么建议吗？

4

1 回答 1

1

这里同样的问题。我在单击 jquery.fullCalendar 中包含的事件时打开的工具提示 (qtip2) 中加载 select2。fullCalendar 本身显示在一个 div 中，用作覆盖我的应用程序的 blockUI 消息。

在本机中，select 的搜索字段无法正常工作。使用 jquery blockUI 版本 2.57.0 (17.02.2013) 我可以通过在后台应用程序中阻止一个元素并立即解除阻止来使 select2 的搜索字段按预期工作：

$("#someDivInTheBg").block();
$("#someDivInTheBg").unblock();

奇怪的是，该解决方法不再适用于 jquery BlockUI 版本 2.64.0 (18.07.13)。我不知道发生了什么，我可以找到如何跟踪问题，除了它显然是在 blockUI/select2 交互中。

请注意，有时，当我在他显示后立即尝试使用 select2 搜索字段时，我输入的第一个字符会在搜索字段被锁定之前显示在搜索字段中。由于我打开qtip时没有加载blockUI，因此该问题可能是由select2代码触发的。

另请注意，位于后台应用程序中的另一个 select2 不会出现此问题（不在 blockUI 消息内）

我将尝试在 blockUI 和 select2 githubs 中报告问题

* 已编辑：解决方案 * 好吧，其实问题很简单。

Select2 分为 2 部分： - select2-container 放置在原始选择旁边（或在处理动态加载的数据时隐藏输入） - select2-drop 放置在标签之前（请注意，此元素是唯一的，用于每个打开时您的 select2 之一）输入字段 .select2-input，select2-drop 的子项。

默认情况下，BlockUI 禁用不在其消息中的元素的键和鼠标事件，正如它的创建者 malsup 在文档中所说：

// 如果您希望对被阻止的内容禁用键和鼠标事件，则启用 bindEvents: true,

因此，当您在 blockUI 消息内的字段上初始化 select2 时，一切都很好，除了在 input.select2-input 字段中禁用了键和鼠标事件，该字段不在 blockUI 消息内，而是在文档末尾附近html...

解决方案就像这样简单：使用选项初始化您的 blockUI：

bindEvents: false,

当心那些可能保持或占据 blockUI 元素之外的焦点的元素，因为鼠标和键事件不会被中和。

也许可以找到针对 blockUI 中 select2 架构的一些改进，以使其更干净。

于 2013-08-23T14:27:48.787 回答