[JS] SELECT2 With Bootstrap4 remove button use span

應用套件遇到一點小問題

SELECT2 套件 https://github.com/select2/select2 套上樣式 Bootstrap 4 – select2-bootstrap4-theme 的時候

Select2  的版本為 4.1.0-beta.1, Select2-bootstrap4-theme 套用的 Select2 版本為 4.0.6-rc.0 目前看到最大的差異是針對 多選的取消框會有點樣式上的問題

原設計的畫面如下:

套用 Select2-bootstrap4-theme 的畫面如下:

 

如果你直接套用就會變成下圖:

 

爬了程式碼發現 beta 版 的 button 採用的是 button 來取消元件,rc版的元件採用的則是 span 來套用,好在程式碼擴充性相當的龐大

載入完 select2 的後端接上

$.fn.select2.amd.require([‘select2/selection/multiple’],function ( MultipleSelection) {
  MultipleSelection.prototype.selectionContainer = function () {
      var $container = $(
        ‘<li class=”select2-selection__choice”>’ +
          ‘<span class=”select2-selection__choice__remove” tabindex=”-1″><span aria-hidden=”true”>&times;</span></span>’ +
          ‘<span class=”select2-selection__choice__display”></span>’ +
        ‘</li>’
      );
    return $container;
  };
});
直接複寫掉 HTML 即可

我是米薩克,想了解更多可以點選  關於我