Trier un select ?

Version imprimable

26/04/2005, 12h16
Yoyo_galère

Trier un select ?

Bonjour,

Dans ma listbox, j'ai plusieurs options définies par un texte (chiffré) et par des valeurs...
J'aimerai trier les éléments de ma listbox en fonction de l'attribut texte de chaque option.
Par exemple, les options suivantes :
010020 (valeur3)
041210 (valeur2)
030010 (valeur1)
002014 (valeur4)

apparaîtraient une fois ordonnées dans ma listbox :

002014 (valeur4)
010020 (valeur3)
030010 (valeur1)
041210 (valeur2)

Je cherche mais j'ai du mal à trouver comment faire :cry:
Auriez-vous une idée, un bout de code?
Merci

Yoyo
26/04/2005, 12h29
Shivaneth

tes champs texte tu les sors d'ou? parce qui si c d'une base de données alors tu dois faire un order by sur ton select
26/04/2005, 12h42
Yoyo_galère

Mes données sortent bien d'une base, mais le but du jeu est de réorganiser la place des options grâce à ce select :wink:
Donc il faut que je gère çà en javascript, puis que j'enregistre les modifs dans ma base
26/04/2005, 13h49
Oluha

j'ai pas compris l'interet et ce que tu cherches à faire en javascript 8O
26/04/2005, 13h49
SpaceFrog

j'ai pas posté un trux dans la faq là dessus ?
26/04/2005, 14h20
Yoyo_galère

Spacefrog,

J'ai bien regardé dans la FAQ, mais je n'ai rien trouvé sur le tri d'un select :?
Je suis preneur du lien si possible

En fait, mon problème est plus complexe Oluha, mais j'ai simplifié au maximum pour aller plus vite...

Imaginez que je veuille organiser un menu avec des sous-rubriques à travers un select.
Je select les éléments à organiser dans ma base, je les affiche dans un select, et je laisse l'utilisateur organiser son menu en positionnant les options en rubriques ou sous-rubriques et en montant ou rabaissant les options pour modifier leur ordre d'apparition dans le menu...
La configuration X du menu est faite, j'enregistre la position des options (et donc la disposition du menu) dans ma base. L'utilisateur peut créer une autre configuration Y comme bon lui semble... Etc...
Voilà pour le principe...
Et pour y arriver, j'ai besoin (entre autres) de reclasser en javascript les éléments alphabétiquement dans mon select, puisque mes options(text) commencent par des chiffres selon une charte de nommage définie...
Compris?
Please help...

Yoyo

tri alpha ou numérique ???

voici déja l'alpha ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<title>Tri alpha sur select</title>
<script type='text/javascript'>
function sortArray(){
Liste= new Array();
Obj= document.getElementById('monselect')
 
for(i=0;i<Obj.options.length;i++){
Liste[i]=new Array()
Liste[i][0]=Obj.options[i].text
Liste[i][1]=Obj.options[i].value
}
Liste=Liste.sort()
 
for(i=0;i<Obj.options.length;i++){
Obj.options[i].text=Liste[i][0]
Obj.options[i].value=Liste[i][1]
}
 
}
 
 
</script>
 
</head>
 
<body>
<select id="monselect" onchange="alert(this.options[this.selectedIndex].value);">
<option value="va">Charle</option>
<option value="vc">Charlène</option>
<option value="vg">Carlos</option>
<option value="vd">Camille</option>
<option value="vh">Aaron</option>
</select>
<br/>
<input type="button" onclick="sortArray()" value="classer" />
</body>
</html>

26/04/2005, 14h51
Yoyo_galère

Spacefrog c génial c exactement ce que je voulais faire!!!
Par contre mes champs commencent par des chiffres et finissent par des lettres, mais le classement a l'air d'être indifféremment fonctionnel pour un classement alpha ou num, voire numalpha comme moi ?
Cà semble fonctionner nickel en tout cas...
Par contre je bute toujours sur le traitement exact à appliquer pour faire monter et descendre mes options (et leurs sous-rubriques 'associées'...) dans mon select. J'ai fait un post dessus mais à priori çà ne chauffe pas grand monde lol!
(oui c une invitation mdr)

Merci encore,

Yoyo
26/04/2005, 14h59
SpaceFrog

tu as le lien vers l'autre post ? trop feneant pour chercher LOL
26/04/2005, 17h12
Yoyo_galère

Merci Spacefrog, voici le lien ici !

Yoyo
29/11/2005, 16h33
Benav

pas tout à fait résolu

Quelqu'un saurait il m'expliquer comment procéder pour que le code spacefrog conserve le 'selected' ?
29/11/2005, 16h42
SpaceFrog

avant le tri choppe le text du selectedindex...

après le tri scanne les text et rend le select lorsqu'il y a concordance ...
25/06/2010, 15h50
ticad

Bonjour,

Juste une petite question au passage, car ce script m'a bien servi, mais malheureusement je bute sur quelque chose qui à mon avis vous semblera évident. J'ai un select qui est de type :

00012 Boulons
56223 Roulements
03200 Armoire

Grace au script, le tri numerique se passe très bien, et mets bien dans l'ordre :

00012 Boulons
03200 Armoire
56223 Roulements

Comment je peux faire, pour que via un autre 'bouton', cela me les reclasse par le nom?

Merci d'avance
25/06/2010, 16h39
SpaceFrog

le code est dans le value et le texte en innerHTML ?
ou les deux sont dans le value
ou les deux sont en innerHTML ...
le plus simple serait que tu nous montre le code html du select

Merci SpaceFrog pour la rapidité de la réponse.

Voici mon code html du select

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
 
<script type='text/javascript'>
function sortArray(){
Liste= new Array();
Obj= document.getElementById('monselect')
 
for(i=0;i<Obj.options.length;i++){
Liste[i]=new Array()
Liste[i][0]=Obj.options[i].text
Liste[i][1]=Obj.options[i].value
}
Liste=Liste.sort()
 
for(i=0;i<Obj.options.length;i++){
Obj.options[i].text=Liste[i][0]
Obj.options[i].value=Liste[i][1]
}
 
}
</script>
 
<select name="famille" id="monselect">
<option value="53" >53 FUSIBLE</option>
<option value="80" >80 ACCOUPLEMENT</option>
<option value="55" >55 AMPOULE </option>
<option value="56" >56 AMPOULE POUR VOYANT</option>
<option value="64" >64 ANTIPARASITE</option>
<option value="26" >26 BAGUE BRONZE</option>
</select>
 
<input type="button" onclick="sortArray()" value="classer" />

Je n'arrive pas à le reclasser par le nom via un autre bouton. ( je suis débutant en javascript.)
Merci d'avance

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<title>Tri alpha sur select</title>
<script type='text/javascript'>
function sortSelect(order){
Liste= new Array();
Obj= document.getElementById('monselect')
 
for(i=0;i<Obj.options.length;i++){
Liste[i]=new Array()
switch(order){
  case 'val'		: 	Liste[i][0]=Obj.options[i].value
              		break;
  case 'alpha'	:  Liste[i][0]=Obj.options[i].text.match(/\D+/)[0]
						break;
 }
Liste[i][1]=Obj.options[i].text
Liste[i][2]=Obj.options[i].value 
 
}
 
 
Liste=Liste.sort()
 
for(i=0;i<Obj.options.length;i++){
Obj.options[i].text=Liste[i][1]
Obj.options[i].value=Liste[i][2]
}
 
}
 
 
 
</script>
 
</head>
 
<body>
<select name="famille" id="monselect" onchange="alert(this.value)">
<option value="53" >53 FUSIBLE</option>
<option value="80" >80 ACCOUPLEMENT</option>
<option value="55" >55 AMPOULE </option>
<option value="56" >56 AMPOULE POUR VOYANT</option>
<option value="64" >64 ANTIPARASITE</option>
<option value="26" >26 BAGUE BRONZE</option>
</select>
 
 
<br/>
<input type="button" onclick="sortSelect('num')" value="classer numerique" />
<input type="button" onclick="sortSelect('alpha')" value="classer alpha" />
</body>
</html>

on peut même aussi choisir de trier sur le innerHTML ou sur la valeur

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<title>Tri alpha sur select</title>
<script type='text/javascript'>
function sortSelect(order){
Liste= new Array();
Obj= document.getElementById('monselect')
 
for(i=0;i<Obj.options.length;i++){
Liste[i]=new Array()
switch(order){
  case 'textnum'		: 	Liste[i][0]=Obj.options[i].text.match(/\d+/)[0]
              		break;
  case 'textalpha'	:  Liste[i][0]=Obj.options[i].text.match(/\D+/)[0]
						break;
  case 'valnum'		: 	Liste[i][0]=Obj.options[i].value.match(/\d+/)[0]
              		break;
  case 'valalpha'	:  Liste[i][0]=Obj.options[i].value.match(/\D+/)[0]
						break;
 
 }
 
Liste[i][1]=Obj.options[i].text
Liste[i][2]=Obj.options[i].value 
 
}
 
 
Liste=Liste.sort()
 
for(i=0;i<Obj.options.length;i++){
Obj.options[i].text=Liste[i][1]
Obj.options[i].value=Liste[i][2]
}
 
}
 
</script>
 
</head>
 
<body>
<select name="famille" id="monselect" onchange="alert(this.value)">
<option value="53" >53 FUSIBLE</option>
<option value="80" >80 ACCOUPLEMENT</option>
<option value="55" >55 AMPOULE </option>
<option value="56" >56 AMPOULE POUR VOYANT</option>
<option value="64" >64 ANTIPARASITE</option>
<option value="26" >26 BAGUE BRONZE</option>
</select>
 
 
<br/>
<input type="button" onclick="sortSelect('textnum')" value="classer numerique" />
<input type="button" onclick="sortSelect('textalpha')" value="classer alpha" />
</body>
</html>

on passe alors en paramètre text ou val puis num ou alpha

25/06/2010, 17h31
ticad

Un grand merci vraiment, c'est tout à fait ce que je voulais.
Cela marche à merveille.

Merci SpaceFrog.