Select2: Etiketler sıralama nasıl engellenir

Question

Kullanıcı birçok öğe (etiket) seçtiğinde, otomatik olarak alfabetik olarak sıralanır. Select2 4.0 kullanarak otomatik sıralama ve kullanıcının siparişini nasıl tutabilirsiniz?

Güncelleme: belirtilen "olası dublicate soru" Select2 v3 eski sürümüne yöneliktir

... Ben sürüm 4 hakkında sormak ... Bu formu eskileride farklıdır ve cevapları sorunu çözmek dosn't sözü .

Answer 1

Ben Select2 v4 ile çalışan bir çözüm bulduk. Öğelerin sırasını değiştirir - kullanıcı tarafından seçilen öğe sonuna taşınır.

$("select").select2(); 
 

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

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script> 
 

 
<select style="width: 500px;" multiple="multiple"> 
 
    <option>two</option> 
 
    <option>four</option> 
 
    <option>six</option> 
 
</select>

Güncelleme

çözüm burada bulunmuştur: github.com/select2/select2/issues/3106. Yazarı kevin-brown'tır.

Answer 2

Bu has been discussed before 2'yi Seç 3.5.2 için, siparişi almak için select2('data') kullanabilirsiniz.

$("select").select2(); 
 

 
$('#sayResult').click(function() { 
 
    // 'data' brings the unordered list, while val does not 
 
    var data = $('select').select2('data'); 
 
    
 
    // Push each item into an array 
 
    var finalResult = data.map(function() { 
 
    return this.id; 
 
    }); 
 

 
    // Display the result with a comma 
 
    alert(finalResult.join(',')); 
 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script> 
 

 
<select style="width: 500px;" multiple="multiple"> 
 
    <option>two</option> 
 
    <option>four</option> 
 
    <option>six</option> 
 
</select> 
 

 
<button id='sayResult'>Say Result</button>