Select2 v4 和 Bootstrap v4 - 缺少下拉菜单答案

【问题标题】：Select2 v4 and Bootstrap v4 - missing dropdownSelect2 v4 和 Bootstrap v4 - 缺少下拉菜单
【发布时间】：2020-03-05 04:38:20
【问题描述】：

尝试在 Bootstrap (v4) 页面上实现 Select2 (v4)，但 Dropdown 未呈现在 templateResult:formatState 上，尽管条目显示在 Select2 框中。并且不使用 templateResult 时，反之亦然。

页面是通过 GET 和 java jsp 加载的。 jQuery：

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

我正在使用的库：

图片：

测试图片：

结果图片：

【问题讨论】：

您可以编辑帖子以获得可以理解的帖子。

标签： jquery jquery-select2

【解决方案1】：

解决了！我在 Bootstrap 格式化页面中调用了相同的函数“select2#formatState”，就像在非 Bootstrap 页面（是我的旧版本页面）中一样。问题出在“select2#formatState”中 - 我忘了添加 return 语句！在旧版本中，这对于解释器来说是可以的，但在 Bootstrap 版本中则不行。然而，这有点奇怪，在旧版本中这被接受了。

在 formatstate 函数中，我编写了一个带有一些逻辑的伪树，这个函数是：

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  !!!
}

【讨论】：