javascript - Esc 键关闭 bootstrap 模式但不关闭其中的 select2 下拉菜单

Question

我在我的下拉列表中实现了 select2，它位于 Bootstrap 模式窗口内。

<div class="modal-body">
...
<div class="controls">
    @Html.DropDownList("Experts", new SelectList(Model.ExpertsInfo, "UserId", "FullName"),
      string.Empty, new { @class = "select", id = "expert-select", autocomplete = "true", autofocus = "", style = "width: 295px;" }                       
                </div>
...
    </div>

 $("#experts").select2({
            allowClear: true,
            minimumResultsForSearch: -1,
            formatNoMatches: function () {
                return "@CommonResources.NoMatches";
            }
        });

一切正常，但如果我关闭模态窗口，当下拉菜单打开时，模态窗口隐藏但下拉菜单仍然存在!我在哪里犯了错误？我是否必须为 esc 键实现我自己的处理程序？

Answer 1

Select2 API

为了关闭 select2，您使用以下命令:

 $('#experts').select2("close");

然后您将根据 Bootstrap 的版本进入关闭事件:

Bootstrap 3

$('#myModal').on('hidden.bs.modal', function () {
  $('#experts').select2("close");
})

Bootstrap 2

$('#myModal').on('hidden', function () {
   $('#experts').select2("close");
})

最终解决方案

根据安东的评论:

$('#expert-modal').keyup(function (e) { if (e.keyCode == 27) {
       $('#s2id_experts').select2("close"); 
    } 
});