Select2 - 預選可排序

在這個例子中，我預先選擇了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>

來源

2016-08-24 NJD

我曾嘗試相同的代碼片段，我已經看到它並沒有按照字母順序顯示。它根據選項的順序顯示，它從第一個選項進行查找並解析所有選項。我剛放置的選項如下，當我運行該代碼段會顯示在此順序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>

希望這有助於。

來源

2016-08-24 13:45:44

Select2 - 預選可排序

回答

相關問題