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

Question

我正在使用带标签的 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>

和

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

Answer 1

几周前我遇到了这个问题，想分享一个替代解决方案，我认为它比其他答案所需的对 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 配对在<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/ -- 希望这对其他人有帮助。