выберите2 нарисовать изображение и текст на выбранной опции - PullRequest
Новая
       12

выберите2 нарисовать изображение и текст на выбранной опции

0 голосов
/ 13 декабря 2018

У меня есть select2 со списком стран с их флагом.Для отображения выбора выберите флаг и страну, но выделенный текст не отображает флаг.

enter image description here

Это код: 

$("#cmbIdioma").select2({
	templateResult: function (idioma) {
  	var $span = $("<span><img src='https://www.free-country-flags.com/countries/"+idioma.id+"/1/tiny/" + idioma.id + ".png'/> " + idioma.text + "</span>");
  	return $span;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>

<div>
  <select id="cmbIdioma" style="width: 200px;">
    <option value="Spain" selected>Spain</option>
    <option value="United_Kingdom">United Kingdom</option>
  </select>                            
</div>

Спасибо за ваше время!

1 Ответ

0 голосов
/ 13 декабря 2018

Выбранный шаблон результатов можно изменить с помощью параметра templateSelection .

Копирование того же шаблона, что и templateResult в templateSelection: 

$("#cmbIdioma").select2({
	templateResult: function (idioma) {
  	var $span = $("<span><img src='https://www.free-country-flags.com/countries/"+idioma.id+"/1/tiny/" + idioma.id + ".png'/> " + idioma.text + "</span>");
  	return $span;
  },
	templateSelection: function (idioma) {
  	var $span = $("<span><img src='https://www.free-country-flags.com/countries/"+idioma.id+"/1/tiny/" + idioma.id + ".png'/> " + idioma.text + "</span>");
  	return $span;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>

<div>
  <select id="cmbIdioma" style="width: 200px;">
    <option value="Spain" selected>Spain</option>
    <option value="United_Kingdom">United Kingdom</option>
  </select>                            
</div>
...