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

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

因此，不是：

相反，我们有：

这可能吗？如果可能，我如何实现

编辑： 代码是：

---

渲染元素时，将为元素添加带有类的ul。此类名为：

select2-selection\uu-rendered

所以我的想法是，在它被渲染之后，我可以选择这个类并添加一些底部。为此，我使用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>

$（“.js示例标记”）。选择2({
标签：真的
});
$（函数（）{
//在这里你添加了你需要的底部像素，我添加了200px。
$（'.select2-selection_uu-rendered'）.css（{top:'200px'，position:'relative'}）；
});

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

几周前，我遇到了这个问题，希望与大家分享一个我觉得不太重要的替代解决方案k比选择其他答案所需的一些样式修改更重要

我们的团队最终使用的是一个脚本，该脚本监听底层

元素的

更改事件，以在同级元素中构建/重建样式化无序列表：

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

在此之后，需要使用
display:none
隐藏
。select2-selection\u choice
元素

注意，在jQuery version>3中，设置属性而不是属性
$opt.prop（'selected'，false）
，在其他情况下，它不会删除创建的标记

这里可以查看完整的示例：--希望这对其他人有所帮助。
我也有同样的需要，因此我编写了一个适用于select2v4的示例


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

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

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

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


使用自定义选择适配器选择2
的完整代码太大，无法在此发布。它只有3kb的缩小。
您必须在选择2主javascript文件后包含它：

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

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

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


演示
谢谢，这太棒了，对我来说几乎就是这样……一个方面是，如果下拉列表下有元素，则显示会与放置在以下元素下的所选标记有点混淆。是否有“自动展开”的方法添加的ul的高度取决于有多少个选项？我做了一个测试来证明我在上面的评论中的意思：基本上我希望能够将结果放在每个相关的下拉列表下。这样更好吗？你可以添加你需要的高度。@MhluziBhaka，等等。我没有测试下拉列表，工作不正常这不正确ct，如果您在文本框中单击，则光标不在正确的位置。您可以尝试：$（'2.select2-selection_u-rendered'）.css（{top:'100px'，position:'relative'）；$（'2.select2-container'）。append（“”）；看一下这个JSFIDLE：为了清楚起见，在上面的回答中，#2是您的特定Select2的id。我遇到的问题是，如果您选择“multiple”，则呈现的Select2实际上没有id。我最后不得不使用.next（）jQuery函数并假设（yikes）select2始终是原始的
select
之后的控件。然后，我根据
select
的ID在每个select2上生成并设置了一个ID。这在git上也提出了一个问题：您可以根据文档为您的selections容器提供一个额外的类，这样您就可以将css样式定位为t他选择了2个选项，这些选项是这个特定类选择器的子项。我已经尝试应用这个示例，但它对我不起作用。请检查。更新的url。如果您看到选择容器完全为空，该示例非常有效。如果我想在那里显示placeholder，该怎么办？谢谢。我已经尝试将此代码与其他代码一起使用对样式的修改，但删除（按“X”）它实际上没有效果。我相信这是因为没有在每个选择选项上设置ID。此代码笔演示了此问题。想知道是否有其他人遇到此问题并知道修复方法？
$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);
});

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

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

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

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

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