Select2, 다른 DIV에 태그 표시

Question

select2 양식의 태그를 다른 DIV로 표시하고 싶습니다. 당신이 그것을 TJ 니콜라이디스에 의해 제안 된 더 이상

$(".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 니콜라이디스 https://stackoverflow.com/a/34140018/3030970에 의해 제안 된 솔루션을 시도하지만 다음 다시 추가, 태그를 제거 할 때 그것은 jQuery를> 3에서 작동하지 않습니다 : 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');