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

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/u/3407699/blog/1920969