Éléments d'options de tri par ordre alphabétique en utilisant jQuery

Ce que je ferais, c'est:

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

Pour ce faire avec jQuery, vous pouvez le faire:

 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 de travail.

Edit – Si vous souhaitez trier de sorte que vous ignorez le cas alphabétique, vous pouvez utiliser les fonctions JavaScript .toUpperCase() ou .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; }); 

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

Ma solution est:

 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 vierges, remplacez html ('') empty ()

 <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); })); 

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é de façon fantastique. Je propose une version légèrement modifiée ici pour toute personne comme moi qui aime trouver un code facilement lisible et la compresser après qu'elle soit comprise. J'ai également utilisé .detach au lieu de .remove pour conserver les liaisons sur les éléments de l'option DOM.

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 paramètre skip_first , qui est utile lorsque vous souhaitez garder la première option sur le dessus, par exemple lorsque "choisir ci-dessous": ".

Il surveille également l'option précédemment sélectionnée.

Exemple d'utilisation:

 jQuery(document).ready(function($) { sortSelectOptions('#select-id', true); }); 

Le plugin jquery.selectboxes.js possède une méthode de tri. Vous pouvez implémenter le plugin ou plonger dans le code pour voir comment trier les options.

Cela vous donnera l'option de les réorganiser manuellement si vous en avez besoin

Comment commander dynamiquement une liste <option select> en utilisant JQuery?

Oui, vous pouvez trier les options par son 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; }; 

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

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

Voici le plugin jQuery réalisé à partir de la réponse de Pointy à l'aide de 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 simple

 $("select").sortSelect(); 

Malakgeorge répond est agréable et peut être facilement enveloppé dans une fonction jQuery:

 $.fn.sortSelectByText = function(){ this.each(function(){ var selected = $(this).val(); var opts_list = $(this).find('option'); opts_list.sort(function(a, b) { return $(a).text() > $(b).text() ? 1 : -1; }); $(this).html('').append(opts_list); $(this).val(selected); }) return this; }