18

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

4 回答 4

18

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

于 2015-12-07T17:52:11.930 回答
4

当您的元素被渲染时，会为元素添加一个带有类的 ul。这个类名是：select2-selection__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>
于 2015-05-22T22:06:40.623 回答
4

我也有同样的需求，所以我编写了一个适用于Select2 v4的自定义选择适配器。

什么是 Select2 适配器？

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

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

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

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

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

插件的完整代码太大，无法在此处发布。它只缩小了 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/

于 2019-05-11T17:28:30.250 回答
0

我似乎无法对选定的答案发表评论……但是对于页面上有多个 select2 并且只想对其中一个执行此操作的情况呢？有没有可靠的方法来识别一个与所有这些？

于 2015-06-08T21:55:50.743 回答