Ordinamento dell’elenco a discesa usando Javascript

Voglio ordinare gli elementi a discesa usando javascript, qualcuno può dirmi come fare questo.

Puoi usare jQuery e qualcosa del genere:

$("#id").html($("#id option").sort(function (a, b) { return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 })) 

Ma probabilmente è meglio chiedere perché e cosa stai cercando di realizzare.

   

Puoi provare la funzione di ordinamento JQuery per questo lavoro:

Prova questo

CODICE HTML –

  

CODICE JQUERY –

 $("#ddlList").html($('#ddlList option').sort(function(x, y) { return $(x).text().toUpperCase() < $(y).text().toUpperCase() ? -1 : 1; })); $("#ddlList").get(0).selectedIndex = 0; e.preventDefault(); 

O

puoi anche usare l'ordinamento di array per questo -

Prova questo

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

Metti i valori delle opzioni e il testo in una matrice, ordina la matrice, quindi sostituisci gli elementi opzione esistenti con i nuovi elementi costruiti dalla matrice ordinata.

DIPENDE SU JQUERY

 function SortOptions(id) { var prePrepend = "#"; if (id.match("^#") == "#") prePrepend = ""; $(prePrepend + id).html($(prePrepend + id + " option").sort( function (a, b) { return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 }) ); } 

Esempi:

 SortOptions("#my-list-id"); 

O

 SortOptions("my-list-id"); 

PER DROPDOWN PER TUTTO IL PROGETTO

 $(document).ready(function () { $.when($('select').addClass('auto-drop-sort')).then($.fn.sortDropOptions("auto-drop-sort")) }) /*sort all dropdown*/ $.fn.sortDropOptions = function(dropdown_class){ var prePrepend = "."; if (dropdown_class.match("^.") == ".") prePrepend = ""; var myParent = $(prePrepend + dropdown_class); $.each(myParent, function(index, val) { /*if any select tag has this class 'manual-drop-sort' this function wont work for that particular*/ if ( ! $(val).hasClass('manual-drop-sort') ) { var selectedVal = $(val).val() $(val).html($(val).find('option').sort( function (a, b) { if ( a.value != -1 && a.value != 0 && a.value != '' ) { return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 } }) ); $(val).val(selectedVal) }else{ /* set custom sort for individual select tag using name/id */ } }); }