$.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. 图像配准建立仿射变换模型并用RANSAC算法评估

    当初选方向时就由于从小几何就不好.缺乏空间想像能力才没有选择摄影測量方向而是选择了GIS. 昨天同学找我帮他做图像匹配.这我哪里懂啊,无奈我是一个别人有求于我,总是不好意思开口拒绝的人.于是乎就看着他 ...

  2. linux 【第五篇】特殊权限及定时任务

    特殊权限 [root@VM_141_154_centos ~]# ls -ld /tmp drwxrwxrwt. 8 root root 4096 Apr 5 08:11 /tmp /tmp/ 公共目 ...

  3. Nyquist–Shannon sampling theorem 采样定理

    Nyquist–Shannon sampling theorem - Wikipedia https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_s ...

  4. Entity Framework底层操作封装V2版本号(3)

    如今是附加的,组合查询须要的扩展类.大家知道lanmda表达式的组合条件比較麻烦,所以就加了一样一个类,方便进行组合查询: using System; using System.Collections ...

  5. CRM 配置 ADFS后,使用自定义STS遇到的问题总结

    1 登录ADFS服务查看 ADFS日志 2 根据日志提示的错误,设置ADFS对应的属性 (Get-ADFSRelyingPartyTrust) | Set-ADFSRelyingPartyTrust  ...

  6. Adding Security to an Existing Website

    The procedure earlier in this article relies on using the Starter Site template as the basis for web ...

  7. CentOS7.2 设置GRUB2引导界面分辨率

    最近在学习OS引导启动,GRUB2的学习材料也不少,主要还看官方手册清晰些. 公司里办公机的多启动用的ubuntu的界面,还挺炫酷的.之前看其他博客网文里看到可以设置grub2的分辨率,我拿CentO ...

  8. linux文件读写 文件锁、select、poll【转】

    本文转载自:http://blog.csdn.net/fansongy/article/details/6853395 一.文件锁 文件锁用于多个用户共同使用或操作同一个文件.有读锁的时候可以再加读锁 ...

  9. 2-3 Windows下一站式开发环境anaconda搭建

    D:\Users\ZHONGZHENHUA\Anaconda3\Scripts\activate.bat https://www.geforce.com/hardware/notebook-gpus/ ...

  10. bzoj 4500: 矩阵【差分约束】

    (x,y,z)表示格子(x,y)的值为z,也就是x行+y列加的次数等于z,相当于差分约束的条件,用dfs判断冲突即可. #include<iostream> #include<cst ...