Reihenfolge der Select2-Auswahl basierend auf Array von Elementen

Question

Ich versuche, die Reihenfolge der ausgewählten Elemente in Select2 basierend auf einem Array festzulegen.

Eine einfache Lösung ist bereits vorgeschlagen worden Elemente in der Reihenfolge anzuhängen, mit denen sie im Dropdown-Menü angeklickt werden (siehe 2rba Antwort auf 2017.10.26 in diesem discussion):

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

Was ich Ich versuche, dieses Verhalten zu imitieren, aber wenn ich ein Array der ausgewählten Elemente übergebe, anstatt sie manuell in der Liste anzuklicken. Ich habe den folgenden Befehl versucht:

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

Aber die Reihenfolge ist nicht erhalten. Ich habe versucht, den Befehl mit einem Element zu einem Zeitpunkt, Looping, aber jeder neue Aufruf überschreibt das vorherige Element:

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

Ich sehe zwei mögliche Lösungen für diese, aber es fehlt die Hintergrund sie arbeiten zu lassen:

1. Wie sollte die obige Iteration angepasst werden an nicht den zuvor hinzugefügten Wert überschreiben?
2. Wie konnte ich den Ansatz übernehmen in diesem gezeigt fiddle (von vol7ron der posts on github), die ziemlich tut viel, was ich frage (das heißt Makeln/Ausschalten des .data('preserved-order',selected))? Da es JSX verwendet, bin ich nicht sicher, wie ich dieses Skript in meinem einfachen JS/jQuery-Skript wiederverwenden könnte.

Answer 1

hier gehen Sie

EDIT:

dies nicht der pretties Lösung, aber es wird die ausgeführte Arbeit.

Sie müssten initSelect Funktion aufrufen, die ein Array von value s als Parameter verwendet. Ich habe einige Kommentare im Code hinterlassen.

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>