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

Ce que je ferais, c'est :

1. Extraire le texte et la valeur de chaque <option> en un tableau d'objets ;
2. Trier le tableau ;
3. Mettre à jour le <option> avec le contenu du tableau dans l'ordre.

Pour faire cela avec jQuery, vous pourriez faire ceci :

var options = $('select.whatever option');
var arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value }; }).get();
arr.sort(function(o1, o2) { return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0; });
options.each(function(i, o) {
  o.value = arr[i].v;
  $(o).text(arr[i].t);
});

Voici un jsfiddle qui fonctionne.

modifier - Si vous voulez trier en ignorant la casse alphabétique, vous pouvez utiliser la fonction JavaScript .toUpperCase() o .toLowerCase() avant de comparer :

arr.sort(function(o1, o2) {
  var t1 = o1.t.toLowerCase(), t2 = o2.t.toLowerCase();

  return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
});

Answer 2

La réponse acceptée n'est pas la meilleure dans tous les cas car parfois vous voulez conserver des classes d'options et des arguments différents (par exemple data-foo).

Ma solution est la suivante :

var sel = $('#select_id');
var selected = sel.val(); // cache selected value, before reordering
var opts_list = sel.find('option');
opts_list.sort(function(a, b) { return $(a).text() > $(b).text() ? 1 : -1; });
sel.html('').append(opts_list);
sel.val(selected); // set cached selected value

//Pour ie11 ou ceux qui obtiennent des options vides, remplacer html('') empty()

Answer 3

html :

<select id="list">
    <option value="op3">option 3</option>
    <option value="op1">option 1</option>
    <option value="op2">option 2</option>
</select>

jQuery :

var options = $("#list option");                    // Collect options         
options.detach().sort(function(a,b) {               // Detach from select, then Sort
    var at = $(a).text();
    var bt = $(b).text();         
    return (at > bt)?1:((at < bt)?-1:0);            // Tell the sort function how to order
});
options.appendTo("#list");                          // Re-attach to select

J'ai utilisé la solution de tracevipin, qui a fonctionné à merveille. Je propose une version légèrement modifiée ici pour tous ceux qui, comme moi, aiment trouver du code facilement lisible, et le compresser après c'est compris. J'ai également utilisé .detach au lieu de .remove pour préserver les liens sur les éléments DOM de l'option.

Answer 4

<select id="mSelect" >
    <option value="val1" > DEF </option>
    <option value="val4" > GRT </option>
    <option value="val2" > ABC </option>
    <option value="val3" > OPL </option>
    <option value="val5" > AWS </option>
    <option value="val9" > BTY </option>
</select>

.

$("#mSelect").append($("#mSelect option").remove().sort(function(a, b) {
    var at = $(a).text(), bt = $(b).text();
    return (at > bt)?1:((at < bt)?-1:0);
}));

Answer 5

Je sais que ce sujet est ancien mais je pense que ma réponse peut être utile à beaucoup de gens.

Voici un plugin jQuery réalisé à partir de Pointu La réponse de l'auteur en utilisant ES6 :

/**
 * Sort values alphabetically in select
 * source: http://stackoverflow.com/questions/12073270/sorting-options-elements-alphabetically-using-jquery
 */
$.fn.extend({
    sortSelect() {
        let 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);
        });
    }
});

L'utilisation est très facile

$("select").sortSelect();