Trier un select ?

**Yoyo_galère** · 26/04/2005, 12h16

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

Auriez-vous une idée, un bout de code?
Merci

Yoyo

**Shivaneth** · 26/04/2005, 12h29

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

**Yoyo_galère** · 26/04/2005, 12h42

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

Donc il faut que je gère çà en javascript, puis que j'enregistre les modifs dans ma base

**Oluha** · 26/04/2005, 13h49

j'ai pas compris l'interet et ce que tu cherches à faire en javascript

**SpaceFrog** · 26/04/2005, 13h49

j'ai pas posté un trux dans la faq là dessus ?

**Yoyo_galère** · 26/04/2005, 14h20

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

**SpaceFrog** · 26/04/2005, 14h35

tri alpha ou numérique ???

voici déja l'alpha ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Yoyo_galère** · 26/04/2005, 14h51

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

**SpaceFrog** · 26/04/2005, 14h59

tu as le lien vers l'autre post ? trop feneant pour chercher LOL

**Yoyo_galère** · 26/04/2005, 17h12

Merci Spacefrog, voici le lien ici !

Yoyo

**Benav** · 29/11/2005, 16h33

Quelqu'un saurait il m'expliquer comment procéder pour que le code spacefrog conserve le 'selected' ?

**SpaceFrog** · 29/11/2005, 16h42

avant le tri choppe le text du selectedindex...

après le tri scanne les text et rend le select lorsqu'il y a concordance ...

**ticad** · 25/06/2010, 15h50

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

**SpaceFrog** · 25/06/2010, 16h39

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

**ticad** · 25/06/2010, 16h50

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

Voici mon code html du select

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 25/06/2010, 17h07

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**SpaceFrog** · 25/06/2010, 17h22

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**ticad** · 25/06/2010, 17h31

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

Merci SpaceFrog.

Trier un select ?

JavaScript

Discussions similaires

Partager

Partager