Javascript per ordinare i contenuti dell’elemento select

c’è un modo rapido per ordinare gli elementi di un elemento select? O devo ricorrere a scrivere javascript?

Per favore qualche idea.

  XXX ABC MMM  

Questo farà il trucco. Passa semplicemente il tuo elemento select a la: document.getElementById('lstALL') quando hai bisogno della tua lista ordinata.

 function sortSelect(selElem) { var tmpAry = new Array(); for (var i=0;i 0) { selElem.options[0] = null; } for (var i=0;i 

Questa soluzione ha funzionato molto bene per me usando jQuery, ho pensato di fare un riferimento incrociato qui come ho trovato questa pagina prima dell’altro. Qualcun altro potrebbe fare lo stesso.

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

dalla lista a discesa Ordinamento usando Javascript

Dalle FAQ del W3C :

Sebbene molti linguaggi di programmazione abbiano dispositivi come caselle a discesa che hanno la capacità di ordinare un elenco di elementi prima di visualizzarli come parte della loro funzionalità, la funzione

Dovresti ordinarli a mano per un documento HTML statico, o ricorrere a Javascript o qualche altro ordinamento programmatico per un documento dinamico.

Ho avuto lo stesso problema. Ecco la soluzione jQuery che ho trovato:

  var options = jQuery.makeArray(optionElements). sort(function(a,b) { return (a.innerHTML > b.innerHTML) ? 1 : -1; }); selectElement.html(options); 

Un’altra opzione:

 function sortSelect(elem) { var tmpAry = []; // Retain selected value before sorting var selectedValue = elem[elem.selectedIndex].value; // Grab all existing entries for (var i=0;i 0) elem.options[0] = null; // Restore sorted elements var newSelectedIndex = 0; for (var i=0;i 

Lavorando con le risposte fornite da Marco Lazzeri e Terre Porter (votarle se questa risposta è utile), ho trovato una soluzione leggermente diversa che conserva il valore selezionato (probabilmente non conserva i gestori di eventi oi dati allegati, però) usando jQuery .

 // save the selected value for sorting var v = jQuery("#id").val(); // sort the options and select the value that was saved j$("#id") .html(j$("#id option").sort(function(a,b){ return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;})) .val(v); 

Questa è una ricompilazione delle mie 3 risposte preferite su questo forum:

  • La migliore e più semplice risposta di jOk.
  • Il semplice metodo jQuery di Terry Porter.
  • Funzione configurabile di SmokeyPHP.

I risultati sono una funzione facile da usare e facilmente configurabile.

Il primo argomento può essere un object selezionato, l’ID di un object selezionato o un array con almeno 2 dimensioni.

Il secondo argomento è facoltativo. Predefinito per l’ordinamento per testo opzione, indice 0. Può essere passato qualsiasi altro indice in modo da ordinare su quello. Può essere passato 1, o il testo “valore”, per ordinare per valore.

Ordina per esempi di testo (tutti vorrebbero ordinare per testo):

  sortSelect('select_object_id'); sortSelect('select_object_id', 0); sortSelect(selectObject); sortSelect(selectObject, 0); 

Ordina per valore (tutti vorrebbero ordinare per valore):

  sortSelect('select_object_id', 'value'); sortSelect('select_object_id', 1); sortSelect(selectObject, 1); 

Ordina qualsiasi array per un altro indice:

 var myArray = [ ['ignored0', 'ignored1', 'Z-sortme2'], ['ignored0', 'ignored1', 'A-sortme2'], ['ignored0', 'ignored1', 'C-sortme2'], ]; sortSelect(myArray,2); 

Quest’ultimo ordinerà l’array per index-2, il sortme.

Funzione di ordinamento principale

 function sortSelect(selElem, sortVal) { // Checks for an object or string. Uses string as ID. switch(typeof selElem) { case "string": selElem = document.getElementById(selElem); break; case "object": if(selElem==null) return false; break; default: return false; } // Builds the options list. var tmpAry = new Array(); for (var i=0;i 0) { selElem.options[0] = null; } // recreates all options with the new order. for (var i=0;i 

Sì, DOK ha la risposta giusta … o ordina i risultati prima di scrivere l’HTML (supponendo che sia dinamico e tu sei responsabile per l’output), o scrivi javascript.

Il metodo di ordinamento Javascript sarà tuo amico qui. Basta estrarre i valori dall’elenco di selezione, quindi ordinarli e reinserirli 🙂

Penso che questa sia un’opzione migliore (utilizzo il codice di @ Matty e migliorato!):

 function sortSelect(selElem, bCase) { var tmpAry = new Array(); bCase = (bCase ? true : false); for (var i=0;i 0) { selElem.options[0] = null; } for (var i=0;i 

Ho usato questo tipo di bolla perché non ero in grado di ordinarli per il valore nella matrice di opzioni ed era un numero. In questo modo li ho ordinati correttamente. Spero sia utile anche a te.

 function sortSelect(selElem) { for (var i=0; i<(selElem.options.length-1); i++) for (var j=i+1; j 

Ho avuto un problema simile, tranne che volevo che gli elementi selezionati comparissero in cima, e non volevo cancellare quali elementi erano stati selezionati (elenco a selezione multipla). Il mio è basato su jQuery …

 function SortMultiSelect_SelectedTop(slt) { var options = $(slt).find("option").sort(function (a, b) { if (a.selected && !b.selected) return -1; if (!a.selected && b.selected) return 1; if (a.text < b.text) return -1; if (a.text > b.text) return 1; return 0; }); $(slt).empty().append(options).scrollTop(0); } 

Senza selezionato in cima, sarebbe simile a questo.

 function SortMultiSelect(slt) { var options = $(slt).find("option").sort(function (a, b) { if (a.text < b.text) return -1; if (a.text > b.text) return 1; return 0; }); $(slt).empty().append(options).scrollTop(0); } 

Ho rapidamente gettato insieme uno che consente la scelta della direzione (“asc” o “desc”), se il confronto dovrebbe essere fatto sul valore dell’opzione (vero o falso) e se gli spazi bianchi iniziali o finali debbano essere ritagliati prima del confronto (booleano).

Il vantaggio di questo metodo è che la scelta selezionata viene mantenuta e tutte le altre proprietà / trigger speciali dovrebbero essere mantenute.

 function sortOpts(select,dir,value,trim) { value = typeof value == 'boolean' ? value : false; dir = ['asc','desc'].indexOf(dir) > -1 ? dir : 'asc'; trim = typeof trim == 'boolean' ? trim : true; if(!select) return false; var opts = select.getElementsByTagName('option'); var options = []; for(var i in opts) { if(parseInt(i)==i) { if(trim) { opts[i].innerHTML = opts[i].innerHTML.replace(/^\s*(.*)\s*$/,'$1'); opts[i].value = opts[i].value.replace(/^\s*(.*)\s*$/,'$1'); } options.push(opts[i]); } } options.sort(value ? sortOpts.sortVals : sortOpts.sortText); if(dir == 'desc') options.reverse(); options.reverse(); for(var i in options) { select.insertBefore(options[i],select.getElementsByTagName('option')[0]); } } sortOpts.sortText = function(a,b) { return a.innerHTML > b.innerHTML ? 1 : -1; } sortOpts.sortVals = function(a,b) { return a.value > b.value ? 1 : -1; } 

Ispirato alla risposta di @Terre Porter, penso che questo sia molto semplice da implementare (usando jQuery)

 var $options = jQuery("#my-dropdownlist-id > option"); // or jQuery("#my-dropdownlist-id").find("option") $options.sort(function(a, b) { return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 }) 

Ma, per gli elenchi a discesa alfabetici / numerici:

Ispirato da: https://stackoverflow.com/a/4340339/1598891

 var $options = jQuery(dropDownList).find("option"); var reAlpha = /[^a-zA-Z]/g; var reNumeric = /[^0-9]/g; $options.sort(function AlphaNumericSort($a,$b) { var a = $a.text; var b = $b.text; var aAlpha = a.replace(reAlpha, ""); var bAlpha = b.replace(reAlpha, ""); if(aAlpha === bAlpha) { var aNumeric = parseInt(a.replace(reNumeric, ""), 10); var bNumeric = parseInt(b.replace(reNumeric, ""), 10); return aNumeric === bNumeric ? 0 : aNumeric > bNumeric ? 1 : -1; } else { return aAlpha > bAlpha ? 1 : -1; } }) 

Spero che ti sarà d'aiuto

Primo esempioSecondo esempio

 function call() { var x = document.getElementById("mySelect"); var optionVal = new Array(); for (i = 0; i < x.length; i++) { optionVal.push(x.options[i].text); } for (i = x.length; i >= 0; i--) { x.remove(i); } optionVal.sort(); for (var i = 0; i < optionVal.length; i++) { var opt = optionVal[i]; var el = document.createElement("option"); el.textContent = opt; el.value = opt; x.appendChild(el); } } 

L'idea è di rimuovere tutti gli elementi della selectbox in una matrice, eliminare i valori della selectbox per evitare di sovrascrivere, ordinare la matrice e quindi spostare indietro la matrice ordinata nella casella di selezione

Non proprio bello come l’esempio di JQuery di Marco ma con il prototipo (potrebbe mancare una soluzione più elegante) sarebbe:

 function sort_select(select) { var options = $A(select.options).sortBy(function(o) { return o.innerHTML }); select.innerHTML = ""; options.each(function(o) { select.insert(o); } ); } 

E poi basta passarlo a un elemento select:

 sort_select( $('category-select') ); 

Solo un altro modo per farlo con jQuery:

 // sorting; var selectElm = $("select"), selectSorted = selectElm.find("option").toArray().sort(function (a, b) { return (a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase()) ? 1 : -1; }); selectElm.empty(); $.each(selectSorted, function (key, value) { selectElm.append(value); }); 

Prova questo … speriamo che ti offra una soluzione:

 function sortlist_name() { var lb = document.getElementById('mylist'); arrTexts = new Array(); newTexts = new Array(); txt = new Array(); newArray =new Array(); for(i=0; i "); newTexts[i] = str[1]+' -> '+str[0]; } newTexts.sort(); for(i=0;i '); newArray[i] = txt[1]+' -> '+txt[0]; } for(i=0; i "); newTexts[i] = str[1]+' -> '+str[0]; } newTexts.reverse(); for(i=0;i '); newArray[i] = txt[1]+' -> '+txt[0]; } for(i=0; i | Name 

 function sortItems(c) { var options = c.options; Array.prototype.sort.call(options, function (a, b) { var aText = a.text.toLowerCase(); var bText = b.text.toLowerCase(); if (aText < bText) { return -1; } else if (aText > bText) { return 1; } else { return 0; } }); } sortItems(document.getElementById('lstALL'));