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

user_5884560 0
Viewed 374

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.

jquery-select2 bootstrap-4 css jquery
1 Answers

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');
});
user_58845600
Related