How do I display the selected tags in Select2 below the dropdown box?

Question

I am using Select2 (version 4) with tags and would like to have the selected choices display below the input field.

So instead of:

Rather have:

Is this possible and if so how do I achieve that?

EDIT: Code is:

<select class="js-example-tags form-control" multiple="multiple">
    <option selected="selected">orange</option>
    <option selected="selected">white</option>
    <option selected="selected">purple</option>
    <option selected="selected">red</option>
    <option selected="selected">blue</option>
    <option selected="selected">green</option>
</select>

and

$(".js-example-tags").select2({
tags: true
})

Answer 1

I came across this question a few weeks ago and wanted to share an alternative solution that I felt carried less risk than some of the style modifications to Select2 that other answers required.

What our team ended up using was a script that listened to the change event of the underlying <select> element to build/rebuild a styled unordered list in a sibling element:

$(".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');

And, to give the new list the functionality in addition to the appearance of the select2 tags, we listened for a click event and paired each list item with the corresponding option in the <select> so it could toggle the selected state and trigger the change event again:

$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);
});

After this, it was a matter of using display: none to hide the .select2-selection__choice elements.

Note in jQuery version > 3 set property instead of attribute $opt.prop('selected', false) in other case it will not remove created tags;

The full example is available for review here: http://jsfiddle.net/tjnicolaides/ybneqdqa/ -- hope this helps someone else.

Answer 2

When your elements get rendered, a ul with a class is added for the elements. This class name is: select2-selection__rendered So my idea was that after it was rendered, I could take this class and add some bottom. For this I used JQuery using $(function() note that what this does is to load after everything has loaded, so for the javascript code you need, is as follows (tested):

Javascript code:

  <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>

Answer 3

I had the same need, so I wrote a custom selection adapter that will work for Select2 v4.

---

What are Select2 Adapters?

According to docs, Select2 uses the Adapter pattern, so the recommended way to extend its functionality is by implementing our own adapters.

The SelectionAdapter controls the display of the selection option(s), as well anything else that needs to be embedded within the container, such as a search box.

Select2 provides the SingleSelection and MultipleSelection adapters as default implementations of the SelectionAdapter for single and multi-select controls, respectively.

The selection adapter can be overridden by assigning a custom adapter to the selectionAdapter configuration option.

---

Select2 with custom Selection Adapter

The full code of the plugin is too big to post it here. It has only 3kb minified. You have to include it after Select2 main javascript file:

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

And the css:

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

Then, initialise the plugin as follows:

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

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

By default, the tags are added immediately after the select2 container. You can use the selectionContainer option to add them somewhere else in the page:

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

---

Demo

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