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的版本进入close事件：

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"); 
    } 
});

esc键关闭bootstrap模式但不关闭其中的select2下拉列表

1 个答案: