select2和bootstrap模态框使用时出现的bug以及解决方案

感情迁移 提交于 2020-03-07 17:46:29

select2 官网 https://select2.org

bootstrap 中模态框兼容问题: 无法显示,搜索框无法输入内容(ie)

1、设置select的z-index要大于模态框(1050) /防止select2不会自动失去焦点/

.select2-container {
      z-index: 16000 !important;
  }
  .select2-drop-mask {
      z-index: 15990 !important;
  }

  .select2-drop-active {
      z-index: 15995 !important;
  }

2、去掉模态框的tabindex="-1" 3、绑定select2的时候,指定其父元素

dropdownParent: $("#myModal"),

tip: 1、去掉搜索框 minimumResultsForSearch: -1

2、改变select的值时,注意手动触发change事件 $("#select2-id").val('value').trigger("change");

3、移出select2

$("#select2-id").select2("destroy")

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!