如何在选择列表中显示Select2选择的值

时间:2018-12-21 14:13:27

标签: jquery css bootstrap-4 jquery-select2

我想在列表下方将Select2选择的值显示为列表。 Similar to this

这不是选择2,而是来自第三方网站的自定义选择。 到现在为止,我还不知道如何将选择内容移动到其他容器。

这是我现有的Select2 The General Multiselect

如果能找到从哪里开始的指导,那就太好了。

1 个答案:

答案 0 :(得分:0)

经过一些研发,我可以使用下面的代码来做到这一点。

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