【问题标题】:esc key close bootstrap modal but doesn't close select2 dropdown inside itesc 键关闭引导模式,但不关闭其中的 select2 下拉菜单
【发布时间】:2015-04-20 17:55:34
【问题描述】:

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

<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 键实现自己的处理程序?

【问题讨论】:

  • 用你的代码创建一个小提琴......可能更自我解释......

标签: javascript asp.net asp.net-mvc twitter-bootstrap jquery-select2


【解决方案1】:

Select2 API

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

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

然后您将根据引导程序的版本点击关闭事件:

引导程序 3

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

引导程序 2

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

最终解决方案

根据安东的 cmets:

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

【讨论】:

  • 不幸的是,bootstrap 2.3 =(
  • @AntonKozlovsky 我还注意到选择的关闭已更改为$('#experts').select2("close"); 我也更新了它。 :)
  • 最终版本(因为您的决定先关闭模式,而不是下拉菜单,而我的决定先关闭下拉菜单)但非常感谢!)$('#expert-modal').keyup(function (e) { if (e.keyCode == 27) { $('#s2id_experts').select2("close"); } });
  • @AntonKozlovsky 不错,将添加回答。祝你好运。
猜你喜欢
  • 1970-01-01
  • 2017-06-28
  • 1970-01-01
  • 2013-05-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-10-02
  • 2014-03-06
相关资源
最近更新 更多