Как отобразить выбранные теги в Select2 под раскрывающимся списком?

Ответ 1

Когда ваши элементы получают визуализацию, для элементов добавляется ul с классом. Это имя класса: select2-selection__rendered Таким образом, моя идея заключалась в том, что после того, как она была обработана, я мог бы взять этот класс и добавить немного дна. Для этого я использовал JQuery с помощью $(function(), отметим, что то, что это делает, - это загрузить после того, как все загрузилось, поэтому для кода javascript, который вам нужен, выглядит следующим образом:

Код Javascript:

  <script>
  $(".js-example-tags").select2({
   tags: true
  });

   $(function() {
      //Here you add the bottom pixels you need. I added 200px.
      $('.select2-selection__rendered').css({top:'200px',position:'relative'});
   });
  </script>

Ответ 2

Я столкнулся с этим вопросом несколько недель назад и хотел поделиться альтернативным решением, которое, как мне казалось, несло меньший риск, чем некоторые модификации стиля в Select2, которые требовались для других ответов.

В конечном итоге наша команда использовала сценарий, который прослушивал событие change базового элемента <select> для создания/перестройки стилизованного неупорядоченного списка в элементе родственного элемента:

$(".js-example-tags").select2({
    tags: true
}).on('change', function() {
    var $selected = $(this).find('option:selected');
    var $container = $(this).siblings('.js-example-tags-container');

    var $list = $('<ul>');
    $selected.each(function(k, v) {
       var $li = $('<li class="tag-selected"><a class="destroy-tag-selected">×</a>' + $(v).text() + '</li>');
       $list.append($li);
    });
    $container.html('').append($list);
}).trigger('change');

И, чтобы дать новому списку функциональность в дополнение к появлению тегов select2, мы прослушали событие click и соединили каждый элемент списка с соответствующей option в <select> чтобы он мог переключать выбранное состояние и инициировать change событие снова:

$selected.each(function(k, v) {
    var $li = $('<li class="tag-selected"><a class="destroy-tag-selected">×</a>' + $(v).text() + '</li>');
    $li.children('a.destroy-tag-selected')
        .off('click.select2-copy')
        .on('click.select2-copy', function(e) {
              var $opt = $(this).data('select2-opt');
              $opt.attr('selected', false);
              $opt.parents('select').trigger('change');
        }).data('select2-opt', $(v));
    $list.append($li);
});

После этого нужно было использовать display: none чтобы скрыть элементы .select2-selection__choice.

Обратите внимание, что в версии jQuery> 3 установите свойство вместо атрибута $opt.prop('selected', false) в $opt.prop('selected', false) случае оно не удалит созданные теги;

Полный пример доступен для просмотра здесь: http://jsfiddle.net/tjnicolaides/ybneqdqa/ - надеюсь, это поможет кому-то еще.

Ответ 3

У меня была такая же потребность, поэтому я написал специальный адаптер выбора, который будет работать для Select2 v4.

Что такое адаптеры Select2?

Согласно документации, Select2 использует шаблон адаптера, поэтому рекомендуемый способ расширить его функциональность - это реализовать наши собственные адаптеры.

SelectionAdapter управляет отображением опций выбора, а также всего остального, что необходимо встроить в контейнер, например, поля поиска.

Select2 предоставляет адаптеры SingleSelection и MultipleSelection качестве реализаций по умолчанию для SelectionAdapter для элементов управления с одним и несколькими элементами выбора соответственно.

Адаптер выбора можно переопределить, назначив пользовательский адаптер параметру конфигурации selectionAdapter.

Select2 с пользовательским адаптером выбора

Полный код плагина слишком велик, чтобы разместить его здесь. Это только 3kb минимизировано. Вы должны включить его после основного файла JavaScript Select2:

<script src="select2.js"></script>
<script src="select2.customSelectionAdapter.min.js"></script>

И CSS

<link rel="stylesheet" href="select2.customSelectionAdapter.css" />

Затем инициализируйте плагин следующим образом:

var CustomSelectionAdapter = $.fn.select2.amd.require("select2/selection/customSelectionAdapter");

$("select").select2({
    // other options 
    selectionAdapter: CustomSelectionAdapter
});

По умолчанию теги добавляются сразу после контейнера select2. Вы можете использовать опцию selectionContainer чтобы добавить их где-то еще на странице:

$("select").select2({
    // other options 
    selectionAdapter: CustomSelectionAdapter,
    selectionContainer: $('.foo')
});

демонстрация

https://andreivictor.github.io/select2-customSelectionAdapter/

Ответ 4

Я не могу прокомментировать выбранный ответ... но как насчет случаев, когда у вас есть несколько select2s на странице, и только хочу сделать это с одним. есть ли какой-либо надежный способ определить, что один против всех из них?