Question

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

已经提出了一个简单的解决方案，可以按照下拉菜单中点击它们的顺序添加项目（请参阅2017-10-26中的2rba答案discussion）：

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

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

上面的迭代应如何适应而不是覆盖之前添加的值？
我如何合并此中显示的方法 fiddle（来自vol7ron的posts on github），非常漂亮我问的很多（即切换开/关 .data('preserved-order',selected)）？因为它正在使用JSX我我不确定如何在我的普通JS / jQuery脚本中重用该脚本。

Answer 1

你去吧

修改

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

您必须调用initSelect函数，该函数将value的数组作为参数。我在代码中留下了一些评论。

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>

Answer 2

这将保留select2选项的属性（例如，用于工具提示的标题）：

const isValidName = (name: string | null): name is string => {
  return name !== null;
}

if (isValidName(myName)) {
  console.log(helloWorld(myName));
}

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

2 个答案: