How to show Select2 selected values under the select as a List

Issue

I want to show Select2 selected values below the dropdown as a List.
Similar to this

This is not Select 2 but a custom select from a 3rd party site.
Till now I have no Idea how to move the selections to a different container.

Here is my existing Select2 The General Multiselect

Would be great if can get direction on where to start.

Solution

After some R&D I was able to do it with below code.

$(document).ready(function(e){
    var $source_select = jQuery('#source_id');
    var $source_display_container = jQuery('.vendor_container');
    $source_select.select2({
        placeholder: 'Select Sources',
        allowClear: true,
        closeOnSelect: false,
    }).on('change', function() {
        var $selected = $(this).find('option:selected');
        var $container = $source_display_container;

        var $list = $('<div class="content">');
        $selected.each(function(k, value) {
            var $source_html_row = $('<div>').addClass('row');
            $source_name = $(value).text();
            $source_id = $(value).attr('data-vendor_id');
            $source_html_row.append(getSourceNameColumn($source_name, value, $source_id));
            $source_html_row.append(getCPIColumn($source_id, value));
            $source_html_row.append(getQuotaColumn($source_id, value));
            $source_html_row.append(getScreenerColumn($source_id,value));
            $source_html_row.append(getQuotaAssignmentColumn($source_id, value));
            $source_html_row.append(getRemoveColumn(value));

            $list.append($source_html_row);
        });
        $container.html('').append($list);
    }).trigger('change');
});

Answered By – Pankaj Jha

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published