SELECT2タグを選択する変化にdivの2

Question

SELECT2に移動しなければならない残りの部分よりも1をDIVする最初の5個の選択したタグを読み込むれるonchangeが正常に動作しているが、私は2つのdivにそれらの選択を分割する必要があり、

1. Div 1 - 最初に選択された5つのタグをdiv 1にロードする必要があります。
2. Div 2 - ユーザーが選択したものがdiv2になるようにした後。

ご意見はお寄せください!!ありがとうございました！

デモはこちらをクリックしてください。

$(document).ready(function() { 
 
    $(".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'); 
 
});

body { 
 
    padding: 2em; 
 
    background: #E2EDFB; 
 
} 
 

 
.js-example-tags-container ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
.tag-selected { 
 
    list-style: none; 
 
    background-color: #e4e4e4; 
 
    border: 1px solid #aaa; 
 
    border-radius: 4px; 
 
    cursor: default; 
 
    float: left; 
 
    margin-right: 5px; 
 
    margin-top: 5px; 
 
    padding: 0 5px; 
 
} 
 

 
.destroy-tag-selected { 
 
    color: #999; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    font-weight: bold; 
 
    margin-right: 2px; 
 
    &:hover { 
 
    text-decoration: none; 
 
    } 
 
} 
 

 
.select2-selection__choice { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script> 
 

 
<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> 
 
<p>&nbsp;</p> 
 
<h4>first</h4> 
 
<div class="js-example-tags-container"></div> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<h4>Second</h4> 
 
<div class="js-example-tags-container"></div>

参照のためのリンクの下

クリック

JS FIDDLE DEMO LINK

。 JS FIDDLE DEMO LINK

Answer 1

さて、次のスクリプトファイルをお試しください。

$(document).ready(function() { 
    $(".js-example-tags").select2({ 
    tags: true 
    }).on('change', function() { 
    var $selected = $(this).find('option:selected'); 
    var $container = $(this).siblings('.js-example-tags-container'); 

    var $list1 = $('<ul>'); 
    var $list2 = $('<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)); 

     if (k < 5) { 
     $list1.append($li); 
     } else { 
     $list2.append($li); 
     } 

    }); 

    $container.eq(0).html('').append($list1); 
    $container.eq(1).html('').append($list2); 
    }).trigger('change'); 
}); 

したがって、5を超える場合は、別のリストにプッシュして2つのリストを別のコンテナに追加します。

JS Fiddle is ready for you