Comment afficher <Select > dans l'ordre trié

Comment puis-je trier les éléments <option> d'un tag <select> en utilisant JavaScript?Comment afficher <Select > dans l'ordre trié

Voici le code HTML je:

<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>

Source

2010-08-12 Tree

<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>

Source

2010-08-12 12:18:19

Je n'ai pas besoin de cliquer et de trier. il doit être trier pendant le chargement – Tree

que d'appeler cette fonction dans l'événement de chargement du corps –

@Tree Ensuite, appelez sortlist() depuis l'élément

Vous devriez penser au niveau d'avant la création html. Si vous les générez à partir d'une sorte de liste ou d'un mécanisme de page dynamique, triez-les avant de générer vos éléments d'option - c'est le plus clair;)

Source

2010-08-12 12:20:25

Cependant, ce n'est pas toujours la meilleure façon de le faire. Parfois, vous avez juste besoin de trier une liste HTML. Par exemple, je viens de demander à un client de me donner une liste d'éléments à mettre dans une liste html. Je préférerais les garder dans le même ordre que celui que le client m'a donné (pour faciliter la maintenance), mais les faire trier quand ils sont affichés à l'utilisateur. – CpnCrunch

Si la valeur est différente du texte, utilisez la fonction suivante pour trier les deux. 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>

Source

2014-10-14 06:38:08

Une solution plus simple, se fondant sur la réponse de Yasir Al-Agi:

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 avez besoin d'un seul tableau, dont les éléments sont simplement des références aux objets « options » d'origine. La fonction sort() a également la liberté de choisir quelle propriété d'option trier (c'est-à-dire la propriété text, la propriété value, etc.). Cependant, n'oubliez pas que la propriété "selectedIndex" du contrôle "select" peut ne plus être correcte après le tri.

Source

2016-04-16 02:26:04 jeffpar

Questions connexes

Comment afficher <Select > dans l'ordre trié

Répondre

Questions connexes