如何在下拉框下方的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

渲染元素时，会为元素添加带有 class 的 ul。这个 class 名字是：select2-selection__rendered 所以我的想法是在它被渲染之后，我可以拿这个 class 并添加一些底部。为此，我使用 JQuery 使用 $(function() 请注意，这是在加载所有内容后加载，因此对于您需要的 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 2

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

Answer 3

几周前我遇到了这个问题，我想分享一个替代解决方案，我认为它比其他答案所需的对 Select2 的一些样式修改风险更小。

我们的团队最终使用的是一个脚本，它侦听底层 <select> 元素的 change 事件到 build/rebuild 兄弟元素中的样式化无序列表：

$(".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 中的相应 option 配对=13=] 这样它就可以切换选定状态并再次触发 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 4

我有同样的需求，所以我写了一个 custom selection adapter 可以用于 Select2 v4.

什么是 Select2 适配器？

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

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

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

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

使用自定义选择适配器选择 2

plugin 的完整代码太大，无法在此处 post。它只有 3kb 缩小。您必须在 Select2 main javascript file:

之后包含它

<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/

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

How do I display the selected tags in Select2 below the dropdown box?

html

css

jquery

jquery-select2-4

什么是 Select2 适配器？

使用自定义选择适配器选择 2

演示