Trier les éléments d'options par ordre alphabétique à l'aide de jQuery

Question

J'essaie de comprendre le triage option à l'intérieur d'un select par ordre alphabétique. Idéalement, j'aimerais que cela soit une fonction distincte dans laquelle je peux simplement passer l'élément de sélection, car il doit être trié lorsque l'utilisateur clique sur certains boutons.

J'ai cherché partout une bonne façon de procéder, mais je n'ai rien trouvé qui fonctionne pour moi.

Les éléments d'option doivent être triés par ordre alphabétique de texte, et non de valeur.

Cela est-il possible d'une manière ou d'une autre ?

Answer 1

Voici ma version améliorée de La solution de Pointy :

function sortSelectOptions(selector, skip_first) {
    var options = (skip_first) ? $(selector + ' option:not(:first)') : $(selector + ' option');
    var arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value, s: $(o).prop('selected') }; }).get();
    arr.sort(function(o1, o2) {
      var t1 = o1.t.toLowerCase(), t2 = o2.t.toLowerCase();
      return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
    }); 
    options.each(function(i, o) {
        o.value = arr[i].v;
        $(o).text(arr[i].t);
        if (arr[i].s) {
            $(o).attr('selected', 'selected').prop('selected', true);
        } else {
            $(o).removeAttr('selected');
            $(o).prop('selected', false);
        }
    }); 
}

La fonction a le skip_first qui est utile lorsque vous voulez garder la première option en haut, par exemple lorsque c'est "choisissez ci-dessous :".

Il garde également la trace de l'option précédemment sélectionnée.

Exemple d'utilisation :

jQuery(document).ready(function($) {

  sortSelectOptions('#select-id', true);

});

Answer 2

Aucune des réponses n'a fonctionné pour moi. Pour une raison étrange, en parcourant les options en boucle, chaque option ne renvoie rien lorsque text() s'appelle. Au lieu de cela, j'ai été obligé de récupérer l'étiquette de l'option via attr('label')

/**
 * Sort the options of the target select list
 * alphabetically by label. For some reason, when
 * we call detach(), the returned options have no
 * text() and instead we're forced to get the option's
 * label via the 'label' attribute.
 * @param select jQuery selector
 */
function sort_multi_select(select) {
    var options = select.find('option');
    options.detach().sort(function (a, b) {
        var at = $(a).attr('label'), //label, not text()
            bt = $(b).attr('label');
        return at > bt ? 1 : at < bt ? -1 : 0;
    });
    options.appendTo(select);
}

//example
sort_multi_select($('#my_select'));

Answer 3

J'ai combiné des parties de de Marxin y de kuxa d'excellentes réponses pour créer une fonction personnalisée jQuery qui

1. trie les options par leur valeur textuelle (insensible à la casse),

2. maintient toute valeur déjà sélectionnée, et

3. renvoie les objets jQuery originaux contre lesquels la fonction est exécutée :

   $.fn.extend({
       sortSelect() {
           return this.each(function(){
               let $this = $(this),
                   original_selection = $this.val(),
                   $options = $this.find('option'),
                   arr = $options.map(function(_, o) { return { t: $(o).text(), v: o.value }; }).get();
   
               arr.sort((o1, o2) => {
                   // sort select
                   let t1 = o1.t.toLowerCase(), 
                       t2 = o2.t.toLowerCase();
                   return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
               });
   
               $options.each((i, o) => {
                   o.value = arr[i].v;
                   $(o).text(arr[i].t);
               });
   
               $this.val(original_selection); 
           })
       }
   });

Un exemple fonctionnel sur jsFiddle est disponible à l'adresse https://jsfiddle.net/jhfrench/64och25e/. .

Answer 4

En jquery.selectboxes.js Le plugin a une méthode de tri. Vous pouvez implémenter le plugin, ou plonger dans le code pour voir une façon de trier les options.

Answer 5

Oui, vous pouvez trier les options par leur texte et l'ajouter à la boîte de sélection.

 function NASort(a, b) {    
      if (a.innerHTML == 'NA') {
          return 1;   
      }
      else if (b.innerHTML == 'NA') {
          return -1;   
      }       
      return (a.innerHTML > b.innerHTML) ? 1 : -1;
  };

Violon : https://jsfiddle.net/vaishali_ravisankar/5zfohf6v/