Trier une liste déroulante

Version imprimable

10/03/2011, 16h54
Bizoo

Trier une liste déroulante

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 !!!
10/03/2011, 17h37
andry.aime

:fleche: :faq:
10/03/2011, 17h54
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 ?!!!
10/03/2011, 19h11
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:

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('|').

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

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

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

C'est bon j'ai la solution :

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

je te livres la fonction qui traine dans mes archives, et qui ne s'occupe que de la partie TRI des options par ordre croissant ou décroissant.

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
function triSelect( obj, sens){
  var oSelect = ( typeof (obj)==='object') ? obj : document.getElementById( obj);
  if( oSelect){
    var oOption = oSelect.options;
    var tOption = [];  // stockage des clones
    var tData   = [];  // stockage des datas
    var i, k, nb = oOption.length;
 
    // creation des clones et recup data pour tri
    for( i= 0, k = 0, i =0; i < nb; i++, k++){
      tOption[k] = oOption[i].cloneNode( true);
      tData [k]  = [ oOption[i].text, k , oOption[i].selected];
    }
    // tri des datas basique
    tData.sort();
    // decroissant si 2eme param < 0
    if( sens < 0){
      tData.reverse();
    }
    // pour eviter les effets de bord avec IE on supprime proprement
    while( oSelect.options.length){
      oSelect.removeChild( oSelect.firstChild);
    }
    // on pourrait egalement faire
    // oSelect.options.length = 0;
 
    // remplacement/ajout des OPTION
    for( i =0, nb = tData.length; i < nb; i++){
      // recup indice
      k = tData[i][1];
      // remplacement pas toujours nickel sous IE, il vaut mieux faire un ajout
      // oSelect.replaceChild( tOption[k], oOption[i]);
      oSelect.appendChild( tOption[k]);
      // IMPORTANT restaure selected non clone
      tOption[k].selected = tData[i][2];
    }
    // because IE rechigne a rafraichir
    oSelect.focus();
  }
}

on peut faire un appel comme suit

Code:

1
2
triSelect( 'pays', -1); // on passe l'ID du select à trier ici en décroissant
triSelect( 'pays');     // idem mais en mode croissant

on peut également passer l'objet direct lorsque l'on est dans une fonction et que l'on a déjà récupéré sa référence, par exemple via un getElementById.