Select2 v4 和 Bootstrap v4 - 缺少下拉菜單

Question

嘗試在 Bootstrap (v4) 頁面上實現 Select2 (v4)，但下拉菜單未呈現在 templateResult:formatState 上，盡管條目顯示在 Select2 框中。 當不使用 templateResult 時，在相反的情況下一切都很好。

該頁面通過 GET 和 java jsp 加載。 jQuery：

$("#country").select2({
  templateResult: formatState,
  templateSelection: formatStateOnChoose,
  placeholder: "select Country",
  dropdownAutoWidth : true
});

我正在使用的庫：

• https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js
• https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js
• https://code.jquery.com/jquery-3.3.1.slim.min.js
• https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js

圖片：

測試圖片：

結果圖片：

Answer 1

解決了。 我在引導格式頁面中調用了相同的 function“select2#formatState”，就像在非引導頁面（是我的舊版本頁面）中一樣，問題出在“select2#formatState”中 - 我忘了添加返回語句。 在舊版本中，這對於解釋器來說是可以的，但在 Bootstrap 版本中則不行。 然而，這有點奇怪，在舊版本中這被接受了。

在格式狀態 function 中，我編寫了一個帶有一些邏輯的偽樹，這是 function：

function formatState (state) {

if (!state.id) {
  return state.text;
}

let idents = state.id.split("&");
let codeId = idents[0].split("=");
let $state;

if (codeId[0] === 'BB' || codeId[0] === 'AA') {

    $state = $( '<span><img src="'+ baseUrl + idents[1] + '" height="10"      
             class="img-flag"/><b>&nbsp;' + state.text + '</b></span>');
} else if (codeId[0] === 'CC' ) {

    $state = $('<span style="padding-left:30px;"><img src="'+ baseUrl + idents[1]
            + '" height="10" class="img-flag"/>&nbsp;' + state.text + '</span>');
} else {

    $state = $('<span style="padding-left:15px;"><img src="'+ baseUrl + idents[1]  
            + '" height="10" class="img-flag"/>&nbsp;' + state.text + '</span>');
}
 return $state;  //<<--- missing  !!!
}