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

Posted 2023-05-07

【中文标题】Select2 v4 和 Bootstrap v4 - 缺少下拉菜单

【英文标题】：Select2 v4 and Bootstrap v4 - missing dropdown

【发布时间】：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
);

我正在使用的库：

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

图片：

测试图片：

结果图片：

【问题讨论】：

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

【参考方案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] + '"       
             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]
            + '"  class="img-flag"/>&nbsp;' + state.text + '</span>');
 else 

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

 return $state;  //<<--- missing  !!!