Select2 jquery plugin показывает количество выбранных элементов в результате вместо тегов

Я использую Select2 jQuery Plugin.

https://select2.github.io/ для справки

Когда я использую множественный вариант выпадающего списка. Результат выбранных элементов отображается в виде тегов в поле, но я просто хочу показать количество выбранных элементов.

Возможно ли это с помощью Select2 jQuery плагина

HTML

<select multiple style="width:100%">
  <option value="1">Name1</option>
  <option value="2">Name2</option>
  <option value="3">Name3</option>
  <option value="4">Name4</option>
  <option value="5">Name5</option>
  <option value="6">Name6</option>
  <option value="7">Name7</option>
</select>

JS

$('select').select2();

Мне нужен вывод ниже

введите описание изображения здесь

вместо вывода тега как.

Пример работы Fiddle

Ответы

Ответ 1

Вы можете добавить этот код после инициализации select2

$('select').on('select2:close', function (evt) {
        var uldiv = $(this).siblings('span.select2').find('ul')
        var count = $(this).select2('data').length
        if(count==0){
          uldiv.html("")
        }
        else{
          uldiv.html("<li>"+count+" items selected</li>")
        }

Ссылка: jsfiddle
Ссылка на select2 events: Здесь

Редактировать:
Если вы хотите отобразить пустой, когда пользователь отменяет выбор, используйте эту скрипту: здесь

Редактировать:
Обновлено, чтобы удалить недостатки при отборе данных и изменить его на главный ответ. Fiddle: здесь

Ответ 2

Селекторы, безусловно, могут быть улучшены, но в качестве чертежа добавление элемента счетчика при изменении и скрытие тегов, подобных этому, кажется, работает по запросу.

$('select').select2({closeOnSelect: false}).on("change", function(e) {
  $('.select2-selection__rendered li:not(.select2-search--inline)').hide();
  $('.counter').remove();
  var counter = $(".select2-selection__choice").length;
  $('.select2-selection__rendered').after('<div style="line-height: 28px; padding: 5px;" class="counter">'+counter+' selected</div>');
});
.counter{
  position:absolute;
  top:0px;
  right:5px;
 }
 .select2-search--inline{
   background-color:Gainsboro;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<link href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css'; return false;" rel="stylesheet"/>
<select multiple style="width:100%" id="mySelect">
  <option value="1">Name1</option>
  <option value="2">Name2</option>
  <option value="3">Name3</option>
  <option value="4">Name4</option>
  <option value="5">Name5</option>
  <option value="6">Name6</option>
  <option value="7">Name7</option>
</select>