select2 formatState не работает с темой bootstrap 4 - PullRequest
Новая
       5

select2 formatState не работает с темой bootstrap 4

1 голос
/ 05 марта 2020

Я добавляю Bootstrap 4 тему, используя select2 bootstrap theme для select2, и мне нужно добавить <span></span> к тексту, используя 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>

И 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({
        templateResult: formatState
    });

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

В действии select2 не отображается <span></span>. я проверяю Js код и удаляю эту строку (тема bootstrap 4): 

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

теперь выберите 2 работы, и я вижу <span></span>. Как я могу решить эту проблему?!

1 Ответ

1 голос
/ 05 марта 2020

Попробуйте выполнить следующие действия: 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
   });
...