Question

我会按照特定的顺序预选项目。

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

有人帮助我

＆＃13;

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");
});

＆＃13;

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

＆＃13;

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>

希望这有帮助。

选择2 - 预选可排序

1 个答案: