Select2，将标签显示到另一个DIV中 [英] Select2, display tags into another DIV

问题描述

我想将标签从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()方法有关吗?

感谢您的帮助:)

解决方案

我终于找到了一个解决方案，它与data()方法无关，但与用于将所选值设置为false的attr()方法有关. /p>

我只是将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');

I Would like display tags from a select2 form into another DIV. I tried the solution proposed by TJ Nicolaides https://stackoverflow.com/a/34140018/3030970 but it does not work on jQuery > 3 when you remove a tag, then add it again, you can not remove it any more

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

The fiddle proposed by TJ Nicolaides : http://jsfiddle.net/tjnicolaides/ybneqdqa/

Is the problem related to the data() method?

Thx for your help :)

解决方案

I finally found a solution, it was not relative to the data() method but to the attr() method used to set the selected value to false.

I simply replace attr() by prop() method, more adapted to this context.

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

这篇关于Select2，将标签显示到另一个DIV中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！