select2和bootstrap模態框使用時出現的bug以及解決方案

select2 官網 https://select2.org

bootstrap 中模態框兼容問題： 沒法顯示，搜索框沒法輸入內容（ie）

一、設置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;
  }

二、去掉模態框的tabindex="-1" 三、綁定select2的時候，指定其父元素

dropdownParent: $("#myModal"),

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

二、改變select的值時，注意手動觸發change事件 $("#select2-id").val('value').trigger("change");

三、移出select2

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