javascript - select2 onchange 加载前 5 个选定的标签到 div 1，其余的应该移动到 div 2

Question

select2 on change selecting tags is working fine, but i need to split those selection into 2 divs,

1. Div 1 - 首先选择的 5 个标签需要加载到 div 1
2. Div 2 - 在 5 之后，无论用户选择什么，它都应该转到 div2。

任何帮助将不胜感激!!谢谢!

单击此处获取演示。 JS FIDDLE DEMO LINK

$(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

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