Comment afficher <Select> dans l'ordre trié

Comment puis-je trier les éléments <option> d'une <select> l'aide de JavaScript?

Voici le HTML que j'ai:

 <form action="example.asp"> <div> <select size="3"> <option value="op2" >Option 2</option> <option value="op1">Option 1</option> <option value="op4">Option 4</option> <option value="op3">Option 3</option> </select> </div> </form> 

 <script language="JavaScript" type="text/javascript"> function sortlist() { var lb = document.getElementById('mylist'); arrTexts = new Array(); for(i=0; i<lb.length; i++) { arrTexts[i] = lb.options[i].text; } arrTexts.sort(); for(i=0; i<lb.length; i++) { lb.options[i].text = arrTexts[i]; lb.options[i].value = arrTexts[i]; } } </script> <form action="#"> <select name=mylist id=mylist size=5> <option value="Anton">Anton <option value="Mike">Mike <option value="Peter">Peter <option value="Bill">Bill <option value="Carl">Carl </select> <br> <a href="javascript:sortlist()">sort</a> </form> 

Si la valeur est différente du texte, utilisez la fonction suivante pour les trier. Ceci est juste une version mise à jour de la solution ci-dessus et gardera à la fois le nom et la valeur associée.

 <script language="JavaScript" type="text/javascript"> function sortList() { var lb = document.getElementById('mylist'); arrTexts = new Array(); arrValues = new Array(); arrOldTexts = new Array(); for(i=0; i<lb.length; i++) { arrTexts[i] = lb.options[i].text; arrValues[i] = lb.options[i].value; arrOldTexts[i] = lb.options[i].text; } arrTexts.sort(); for(i=0; i<lb.length; i++) { lb.options[i].text = arrTexts[i]; for(j=0; j<lb.length; j++) { if (arrTexts[i] == arrOldTexts[j]) { lb.options[i].value = arrValues[j]; j = lb.length; } } } } </script> 

Vous devriez réfléchir sur le niveau de création pré-html. Si vous les générez à partir d'une sorte de liste ou par un mécanisme de page dynamique, sélectionnez-les avant de générer vos éléments d'option – c'est le moyen le plus clair possible;

Une solution plus simple, en s'appuyant sur la réponse de Yasir Al-Agl:

 function sortList() { var lb = document.getElementById('mylist'); arr = new Array(); for(i = 0; i < lb.length; i++) { arr[i] = lb.options[i]; } arr.sort(function(a,b) { return (a.text > b.text)? 1 : ((a.text < b.text)? -1 : 0); }); // or use localeCompare() if you prefer for(i = 0; i < lb.length; i++) { lb.options[i] = arr[i]; } } 

En bref, vous n'avez besoin d'une seule Array, dont les éléments sont simplement des références aux objets "d'options" d'origine. La fonction sort () a également la liberté de choisir la propriété de l'option à trier (c'est-à-dire la propriété du texte, la propriété de la valeur, etc.).

N'oubliez pas, cependant, que la propriété "selectedIndex" de la commande "select" ne soit plus correcte après le tri.