Discussion :

[Bizoo]

Bonjour,

j'ai un petit problème, je n'arrive pas à trier une liste déroulante en javascript ...

Mon cas :
J'ai 2 listes et 2 boutons.
Sur le clique d'un bouton, la valeur sélectionné dans la liste 1 passe dans la liste 2 et disparait de la 1.
L'autre bouton fait l'inverse.

Jusque là tout marche bien mais après le changement d'une valeur d'une liste à l'autre (que j'insère en dernière position) j'aimerais lancer le tri de la liste cible afin que la valeur qui est ajoutée se mette à la bonne place !

Est-ce possible en JavaScript ? Si oui comment ?

Merci d'avance !!!

[andry.aime]

[Bizoo]

J'ai vu se script en fouillant avant de poster mais il fait ce que je fais déjà mais où est le tri de la liste ?!!!

[NoSmoking]

dans le principe il te faut 2 tableaux
- un tableau qui recevra les clones de toutes les OPTION du SELECT
- un tableau en parallèle dans lequel tu stockes le text et l'indice de l'OPTION, par exemple

Code :

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

tData [k]  = oOption[i].text + "|" + k;

ensuite tu appliques la method sort sur le tableau tData, il sera dans l'ordre croissant par défaut

après tu remplaces, via un replaceChild, chaque OPTION du SELECT par son clone se trouvant à l'indice k, récupéré grâce à un split('|').

[Bizoo]

Avec ce que tu m'as donné comme info j'ai adapté ma fonction js comme ceci :

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
function ajouter()
		{
			var dedans = document.getElementById("dedans");
			var dehors = document.getElementById("dehors");
 
			selectedIndex = dehors.selectedIndex;
 
			dedans.options[dedans.options.length] = new Option(dehors.options[selectedIndex].innerHTML, dehors.options[selectedIndex].value);
 
			dehors.options[selectedIndex] = null;
 
			var cloneOptions = dedans.options;
			var tabTri = new Array(cloneOptions.length);
			for(i=0; i<dedans.options.length; i++)
			{
				tabTri[i] = dedans.options[i].innerHTML + "|" + i;
			}
			tabTri.sort();
 
			for(j=0; j<tabTri.length; j++)
			{
				tabSplit = tabTri[j].split("|");
				dedans.options[j] = cloneOptions[tabSplit[1]];
			}
		}

Mais ça ne marche pas ...
Peux-tu m'en dire plus sur la fonction replaceChild donc tu parle ?!

[Bizoo]

Hop fermes ta bouche Bizoo et cherche un peu plus avant de l'ouvrir !...

C'est bon j'ai la solution :

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
61
62
63
function retirer()
{
	var dedans = document.getElementById("dedans");
	var dehors = document.getElementById("dehors");
 
	selectedIndex = dedans.selectedIndex;
	dehors.options[dehors.options.length] = new Option(dedans.options[selectedIndex].innerHTML, dedans.options[selectedIndex].value);
	dedans.options[selectedIndex] = null;
 
	var tabTri = new Array(dehors.options.length);
	for(i=0; i<dehors.options.length; i++)
	{
		tabTri[i] = dehors.options[i].innerHTML + "|" + i;
	}
	tabTri.sort();
 
	newDehors = document.createElement("select");
	newDehors.name = "dehors";
	newDehors.id = "dehors";
	newDehors.options.length = dehors.options.length;
	newDehors.options.size = 10;
	for(j=0; j<tabTri.length; j++)
	{
		tabTemp = tabTri[j].split("|");
		newDehors.options[j].innerHTML = dehors.options[tabTemp[1]].innerHTML;
		newDehors.options[j].value = dehors.options[tabTemp[1]].value;
	}
	newDehors.ondblclick = function() {ajouter();};
 
	dehors.parentNode.replaceChild(newDehors, dehors);
}
 
function ajouter()
{
	var dedans = document.getElementById("dedans");
	var dehors = document.getElementById("dehors");
 
	selectedIndex = dehors.selectedIndex;
	dedans.options[dedans.options.length] = new Option(dehors.options[selectedIndex].innerHTML, dehors.options[selectedIndex].value);
	dehors.options[selectedIndex] = null;
 
	var tabTri = new Array(dedans.options.length);
	for(i=0; i<dedans.options.length; i++)
	{
		tabTri[i] = dedans.options[i].innerHTML + "|" + i;
	}
	tabTri.sort();
 
	newDedans = document.createElement("select");
	newDedans.name = "dedans";
	newDedans.id = "dedans";
	newDedans.options.length = dedans.options.length;
	newDedans.options.size = 10;
	for(j=0; j<tabTri.length; j++)
	{
		tabTemp = tabTri[j].split("|");
		newDedans.options[j].innerHTML = dedans.options[tabTemp[1]].innerHTML;
		newDedans.options[j].value = dedans.options[tabTemp[1]].value;
	}
	newDedans.ondblclick = function() {retirer();};
 
	dedans.parentNode.replaceChild(newDedans, dedans);
}

Merci de votre aide !

Bizoo