如何在下拉框下方的Select2中显示选中的标签？

我正在使用带有标签的 Select2（版本 4），并且希望将所选选项显示在输入字段下方。

所以而不是：

而是有：

这可能吗？如果可能的话我该如何实现？

编辑： 代码是：

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

几周前我遇到了这个问题，并想分享一个替代解决方案，我认为该解决方案比其他答案所需的对 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 in the <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)在其他情况下，它不会删除创建的标签；

完整的示例可在此处查看：http://jsfiddle.net/tjnicolaides/ybneqdqa/ http://jsfiddle.net/tjnicolaides/ybneqdqa/——希望这对其他人有帮助。