web-dev-qa-db-fra.com

Select2: Comment empêcher le tri des balises

Lorsque l'utilisateur sélectionne de nombreux éléments (balises), ils sont automatiquement triés par ordre alphabétique. Comment empêcher le tri automatique et conserver la commande de l'utilisateur à l'aide de Select2 4.0?

Mettre à jour:

La "question double possible" mentionnée concerne l'ancienne version de Select2 v3 ... Je pose des questions sur la version 4 ... Elle diffère des anciennes et les réponses mentionnées ne résolvent pas le problème.

jqueryjquery-select2
16
Ivan Z

J'ai trouvé une solution qui fonctionne avec Select2 v4. Il change l'ordre des éléments - l'élément sélectionné par l'utilisateur est déplacé à la fin.

$("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>

Mise à jour

La solution a été trouvée ici: github.com/select2/select2/issues/3106 . Son auteur est brun kevin.

42
Ivan Z

Ceci a été discuté auparavant pour Select2 3.5.2, vous pouvez utiliser select2('data') pour obtenir la commande.

$("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>
2
ANR Upgraded Version