如何在下拉框下方的 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 的某些样式修改风险小。

我们的团队最终使用的是一个脚本，它监听底层 <select> 元素的 change 事件以在兄弟元素中构建/重建样式化无序列表：

$(".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 事件并将每个列表项与 <select> 中对应的 option 配对，以便它可以切换选中状态并再次触发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/ -- 希望这对其他人有所帮助。

Answer 2

当你的元素被渲染时，会为元素添加一个带有类的 ul。这个类名是：select2-selection__rendered 所以我的想法是，渲染完之后，我可以上这门课，并添加一些底部。为此，我使用 $(function() 使用 JQuery 请注意，这是在所有内容加载后加载，因此对于您需要的 javascript 代码，如下（经过测试）：

Javascript 代码：

  <script>
  $(".js-example-tags").select2({
   tags: true
  });

   $(function() {
      //Here you add the bottom pixels you need. I added 200px.
      $('.select2-selection__rendered').css({top:'200px',position:'relative'});
   });
  </script>

Answer 3

我也有同样的需求，所以我写了一个custom selection adapter，它适用于Select2 v4。

---

什么是 Select2 适配器？

根据docs，Select2 使用适配器模式，因此推荐的扩展其功能的方法是实现我们自己的适配器。

SelectionAdapter 控制选择选项的显示，以及需要嵌入到容器中的任何其他内容，例如搜索框。

Select2 提供 SingleSelection 和 MultipleSelection 适配器作为 SelectionAdapter 的默认实现，分别用于单选和多选控件。

可以通过将自定义适配器分配给selectionAdapter 配置选项来覆盖选择适配器。

---

带有自定义选择适配器的Select2

plugin 的完整代码太大，无法在此处发布。它只缩小了 3kb。 您必须在 Select2 主 javascript 文件之后包含它：

<script src="select2.js"></script>
<script src="select2.customSelectionAdapter.min.js"></script>

还有css：

<link rel="stylesheet" href="select2.customSelectionAdapter.css" />

然后，如下初始化插件：

var CustomSelectionAdapter = $.fn.select2.amd.require("select2/selection/customSelectionAdapter");

$("select").select2({
    // other options 
    selectionAdapter: CustomSelectionAdapter
});

默认情况下，标签会立即添加到 select2 容器之后。您可以使用selectionContainer 选项将它们添加到页面中的其他位置：

$("select").select2({
    // other options 
    selectionAdapter: CustomSelectionAdapter,
    selectionContainer: $('.foo')
});

---

演示

https://andreivictor.github.io/select2-customSelectionAdapter/

Answer 4

我似乎无法对所选答案发表评论...但是如果您在页面上有多个 select2 并且只想对一个执行此操作，那该怎么办。有没有可靠的方法来识别一个与所有这些？