$.fn.modal.Constructor.prototype.enforceFocus = function () {
$("#insertModal").on("shown.bs.modal", function () {
$("#Ranks_Name").select2({
dropdownParent: $("#insertModal")
});
$("#Role").select2({
dropdownParent: $("#insertModal")
});
})
$("#updateModal").on("shown.bs.modal", function () {
$("#Ranks_Name1").select2({
dropdownParent: $("#updateModal")
});
$("#Role1").select2({
dropdownParent: $("#updateModal")
});
})
};

在普通页面中使用Select2是正常的,但是在Modal中使用就发现了一些问题,首先如果在页面加载完成后就调用

$(".select2").select2();是会有问题的,你会发现Modal框中的select显示不正常,正确的做法是要改成

$("#editModal").on("shown.bs.modal", function(){
            $(".select2").select2();
 })

这是在Modal显示出来后再初始select2。

但是又发现另一个问题,如果你的Modal定义是下面这样的

<div class=" content modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="false">

你会发现select2的输入框不能输入,这时候把tabindex="-1"去掉就可以了。

还有一个方法是

在js 内加上下面这句
$.fn.modal.Constructor.prototype.enforceFocus = function () { };

经实际验证,tabindex="-1"有时候不一定有效,加上上面这句是可以的

参考文章http://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal

    https://www.cnblogs.com/sheldon-lou/p/3730905.html

https://blog.csdn.net/u013126379/article/details/53044933

在Bootstrap中得模态框(modal)中下拉不能显示得问题的更多相关文章

  1. 整理:手机端弹出提示框,使用的bootstrap中的模态框(modal,弹出层),比kendo弹出效果好

    效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...

  2. bootstrap中的模态框(modal,弹出层)

    默认的modal示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...

  3. Bootstrap学习5--bootstrap中的模态框(modal,弹出层)

    bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集. 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 b ...

  4. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

  5. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  6. Bootstrap(v3.2.0)模态框(modal)垂直居中

    Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...

  7. Bootstrap历练实例:模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...

  8. Bootstrap Modals(模态框)

    http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.html 描述 Bootstrap Modals(模态框)是使用定制的 Jquery ...

  9. bootstrap课程11 模态框如何使用

    bootstrap课程11 模态框如何使用 一.总结 一句话总结:多看手册咯. 1.模态框对应的英文单词是什么? modal,而不是madel 2.bootstrap中如何关闭某个效果? 比如要关掉m ...

随机推荐

  1. Java小白手记2:一些名词解释

    看到<Java 征途:行者的地图> ,这是一篇有关java学习路径文章.对我等Java小白有指引作用.里面提到了一些基本的名词术语,有些我知道,有些不知道,再补上一些自己曾觉得模糊的,记录 ...

  2. 解决oracle 表被锁住问题

    想修改Oracle下的某一张表,提示 "资源正忙, 但指定以 NOWAIT 方式获取资源, 或者超时失效" 看上去是锁住了. 用系统管理员登录进数据库,然后 SELECT sid, ...

  3. 鉴权应用服务器 app客户端 web服务端 安全令牌(SecurityToken)、临时访问密钥(AccessKeyId, AccessKeySecret)

    设置EndPoint和凭证 移动终端是一个不受信任的环境,把AccessKeyId和AccessKeySecret直接保存在终端用来加签请求,存在极高的风险.建议只在测试时使用明文设置模式,业务应用推 ...

  4. HDU1007(求近期两个点之间的距离)

    一年前学长讲这题的时候,没听懂.自己搜解题报告也看不懂,放了一年. 现在对分治和递归把握的比一年前更加熟悉,这题也就攻克了. 题意:给你一堆点让你求近期两点之间距离的一半,假设用暴力的话O(n*n)明 ...

  5. 解决Linux环境Oracle显示乱码

    首先查看当前的编码格式 select userenv('language') from dual; 解决方法:   一.临时解决方法   切换到Oracle用户,执行   export NLS_LAN ...

  6. 用过滤器Filter判断用户是否登陆

    用过滤器Filter判断用户是否登陆 WEB.XML <!-- 用户session的 键   sessionKEY --> <context-param> <param- ...

  7. BZOJ1143:祭祀river(二分图求有向图的最大点独立集)

    在遥远的东方,有一个神秘的民族,自称Y族.他们世代居住在水面上,奉龙王为神.每逢重大庆典, Y族都 会在水面上举办盛大的祭祀活动.我们可以把Y族居住地水系看成一个由岔口和河道组成的网络.每条河道连接着 ...

  8. 杂项:Java un

    ylbtech-杂项:Java 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech. ...

  9. 无线 WIFI 的13个信道频率范围(转载)

    转自:http://cnzhx.net/blog/13-channels-of-wifi/ 目前主流的无线WIFI网络设备不管是802.11b/g还是802.11b/g/n 一般都支持13个信道.它们 ...

  10. TCP协议中的三次握手和四次挥手(图解)【转载】

    建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 先来看看如何建立连接的. 首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资 ...