[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;
 };
});