jquery - Select2 - 预选可排序

Question

我会按特定顺序预先选择项目。

在此示例中，我预先选择了 ID 为 36、17 和 42 的资源。因此，我希望它们按 42、17 和 36 的顺序显示，但 select2 按字母顺序显示我。

谁来帮帮我

var PRESELECTED_RESSOURCES = ['42', '36', '17'];

// Function search start one character
function matchStart(params, data) {
  params.term = params.term || '';
  if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
    return data;
  }
  return false;
}

// Function search start one character
(function($) {
  $.fn.extend({
    select2_sortable: function() {
      var select = $(this);
      $(select).select2({
        width: '100%',
        placeholder: 'Select ressources',
        matcher: function(params, data) {
          return matchStart(params, data);
        },
        createTag: function(params) {
          return undefined;
        },
        language: "fr"
      });
      var ul = $(select).next('.select2-container').first('ul.select2-selection__rendered');
      ul.sortable({
        placeholder: 'ui-state-highlight',
        forcePlaceholderSize: true,
        items: 'li:not(.select2-search__field)',
        tolerance: 'pointer',
        stop: function() {
          $($(ul).find('.select2-selection__choice').get().reverse()).each(function() {
            var id = $(this).data('data').id;
            var option = select.find('option[value="' + id + '"]')[0];
            $(select).prepend(option);
          });
        }
      });
    }
  });
}(jQuery));
$('#essentiels').select2_sortable()
$("#essentiels").val(PRESELECTED_RESSOURCES).trigger("change");

//Function 
$("select").on("select2:select", function(evt) {
  var element = evt.params.data.element;
  var $element = $(element);

  $element.detach();
  $(this).append($element);
  $(this).trigger("change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />

<select class="js-example-basic-multiple" name="essentiels[]" multiple="" id="essentiels" aria-hidden="true">
  <option value="17">A to Z BASE REVUES &amp; E-BOOKS</option>
  <option value="33">FREE LIBRARY</option>
  <option value="35">HAL - HYPER ARTICLE EN LIGNE</option>
  <option value="9">IEEE Xplore</option>
  <option value="36">IOP : INSTITUTE OF PHYSICS PUBLISHING - REVUES (Licence nationale)</option>
  <option value="40">JSTOR (Journals Storage)</option>
  <option value="10">KHEOX</option>
  <option value="11">Kompass</option>
  <option value="41">LINGUEE - TRADUCTEUR FRANCAIS/ANGLAIS</option>
  <option value="42">NATURE</option>
  <option value="46">OPEN GREY (anciennement OPEN SIGLE)</option>
  <option value="48">PERSEE</option>
</select>

Answer 1

我尝试了相同的代码片段，但我发现它没有按字母顺序显示。它根据选项的顺序显示，从第一个选项开始查找并解析所有选项。我刚刚放置了如下选项，当我运行代码片段时，它按顺序显示 42 、 17 和 36

<option value="42">NATURE</option>
<option value="17">A to Z BASE REVUES &amp; E-BOOKS</option>
<option value="33">FREE LIBRARY</option>
<option value="35">HAL - HYPER ARTICLE EN LIGNE</option>
<option value="9">IEEE Xplore</option>
<option value="36">IOP : INSTITUTE OF PHYSICS PUBLISHING - REVUES(Licence nationale)</option>
<option value="40">JSTOR (Journals Storage)</option>
<option value="10">KHEOX</option>
<option value="11">Kompass</option>
<option value="41">LINGUEE - TRADUCTEUR FRANCAIS/ANGLAIS</option>
<option value="46">OPEN GREY (anciennement OPEN SIGLE)</option>
<option value="48">PERSEE</option>

希望这有帮助。