基于项目数组的 Select2 选择顺序

Question

我正在尝试Select2根据数组设置所选项目的顺序。

已经提出了一个简单的解决方案，按照在下拉菜单中单击它们的顺序附加项目（请参阅本讨论中2rba 在 2017-10-26 上的回答）：

        $("#selectCriteria").on("select2:select", function (evt) {
          var element = evt.params.data.element;
          var $element = $(element);
          $element.detach();
          $(this).append($element);
          $(this).trigger("change");
    });

我想要做的是模仿这种行为，但是当传递所选项目的数组而不是在列表中手动单击它们时。我尝试了以下命令：

displayed_items = ["b", "c", "a"];  
$('#selectCriteria').val(displayed_items).trigger('change'); 

但顺序没有保留。我尝试一次用一个元素循环命令，但每次新调用都会覆盖前一个元素：

 $('#selectCriteria').val("b").trigger('change'); 
 $('#selectCriteria').val("c").trigger('change'); 
 $('#selectCriteria').val("a").trigger('change'); 

我看到了两种可能的解决方案，但缺乏使它们工作的背景：

1. 上面的迭代应该如何适应而不覆盖之前添加的值？
2. 我怎样才能结合这个小提琴中显示的方法 （来自 vol7ron在 github 上的帖子），它几乎可以满足我的要求（即打开/关闭 .data('preserved-order',selected)）？由于它正在使用，JSX我不确定如何在我的纯 JS/jQuery 脚本中重用该脚本。

Answer 1

干得好

编辑：

这不是最漂亮的解决方案，但它完成了工作。

您将不得不调用initSelect将values数组作为参数的函数。我在代码中留下了一些注释。

displayed_items = $('#selected_items').val().split(',');
    
function selectItem(target, id) { // refactored this a bit, don't pay attention to this being a function
  var option = $(target).children('[value='+id+']');
  option.detach();
  $(target).append(option).change();
} 

function customPreSelect() {
  let items = $('#selected_items').val().split(',');
  $("select").val('').change();
  initSelect(items);
}

function initSelect(items) { // pre-select items
  items.forEach(item => { // iterate through array of items that need to be pre-selected
    let value = $('select option[value='+item+']').text(); // get items inner text
    $('select option[value='+item+']').remove(); // remove current item from DOM
    $('select').append(new Option(value, item, true, true)); // append it, making it selected by default
  });
}

$('select').select2();
$('select').on('select2:select', function(e){
  selectItem(e.target, e.params.data.id);
});

initSelect(displayed_items); // call init

select {
  width: 50%;
}

.container {
  display: flex;
  flex-direction: column;
}

.control-group {
  padding-bottom: 1em;
}

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

<div class="container">

  <p>Provide comma separated items to be pre selected and click the button</p>
  <div class="control-group">
    <input id="selected_items" value="b,c,a"/>
    <button onclick="customPreSelect()">Init</button>
  </div>

  <select multiple="multiple">
    <option value="a">A</option>
    <option value="b" >B</option>
    <option value="c">C</option>
    <option value="d">D</option>
  </select>
</div>