select2，将标签显示到另一个DIV中答案

【问题标题】：Select2, display tags into another DIVselect2，将标签显示到另一个DIV中
【发布时间】：2017-10-31 22:24:04
【问题描述】：

我希望将 select2 表单中的标签显示到另一个 DIV 中。我尝试了 TJ Nicolaides https://stackoverflow.com/a/34140018/3030970 提出的解决方案，但是当你删除一个标签时它在 jQuery > 3 上不起作用，然后再次添加它，你不能再删除它了

$(".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>');
    $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);
  });
  $container.html('').append($list);
}).trigger('change');

TJ Nicolaides 提出的小提琴：http://jsfiddle.net/tjnicolaides/ybneqdqa/

问题与data()方法有关吗？

感谢您的帮助:)

【问题讨论】：

使用 th fiddle linked 使用 3.2.1 和 3.1.1 对我有用，在您的控制台中向您显示什么错误？
控制台什么都没有，但是当你删除一个标签，然后再添加它，你不能再删除它了
您应该将其添加到您的问题中。因为它不起作用不是描述性问题
当然，你是对的:)

标签： jquery jquery-select2

【解决方案1】：

我终于找到了一个解决方案，它与data()方法无关，而是与用于将选定值设置为false的attr()方法有关。

我只是简单地将attr() 替换为prop() 方法，更适合这种情况。

$(".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>');
    $li.children('a.destroy-tag-selected')
      .off('click.select2-copy')
      .on('click.select2-copy', function(e) {
        var $opt = $(this).data('select2-opt');

        $opt.prop('selected', false); // <-- Main difference

        $opt.parents('select').trigger('change');
      }).data('select2-opt', $(v));
    $list.append($li);
  });
  $container.html('').append($list);
}).trigger('change');

【讨论】：