Question

我想将select2表单中的标签显示到另一个DIV中。我尝试了TJ Nicolaides https://stackoverflow.com/a/34140018/3030970提出的解决方案，但它不适用于jQuery＆gt; 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（）方法有关？

感谢你的帮助：）

Answer 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');

选择2，将标签显示到另一个DIV中

1 个答案: