Javascript 选择2 formatState不使用引导4主题

我将bootstrap4主题添加到select2中，并需要使用

formatState

方法将

添加到文本中

我的HTML代码是：

<div class="fieldset fieldset-1">
   <label for="color">Choose color</label>
   <select name="color" class="select2">                             
      <option value="grn">Green</option>
      <option value="blu">Blue</option>
      <option value="brn">Brown</option>
      <option value="blk">Black</option>
      <option value="red">Red</option>
      <option value="yel">Yellow</option>
      <option value="wht">White</option>                                  
    </select>
 </div>

现在选择2工作，我看到

。我怎样才能解决这个问题

在JS中尝试以下内容

    function formatState (state) {
    if (!state.id) {
        return state.text;
    }
    var baseUrl = "/user/pages/images/flags";
    var $state = $(
        '<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + 
      '.png" class="img-flag" /> ' + state.text + '</span>'
    );
    return $state;
  };

   $(".select2").select2({
      theme: 'bootstrap4',
      templateResult: formatState
   });

函数格式化状态（状态）{
如果（！state.id）{
返回state.text；
}
var baseUrl=“/user/pages/images/flags”；
变量$state=$(
''+state.text+''中
);
返回$state；
};
$（“.select2”）。选择2({
主题：“bootstrap4”，
templateResult:formatState
});

$('select').select2({
    theme: 'bootstrap4',
});

    function formatState (state) {
    if (!state.id) {
        return state.text;
    }
    var baseUrl = "/user/pages/images/flags";
    var $state = $(
        '<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + 
      '.png" class="img-flag" /> ' + state.text + '</span>'
    );
    return $state;
  };

   $(".select2").select2({
      theme: 'bootstrap4',
      templateResult: formatState
   });