bascule entre liste

**socaw** · 17/05/2010, 12h01

Bonjour,

Dans un page html, j'aimerais faire passer des valeurs de la liste <select> "annee_ref" vers une autre liste identifiée "out".

Voilà mon code html :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<td>
<select id="annee_ref" name="anneeRef" multiple="multiple" size="5">
	<option>1999</option>
	<option>2000</option>
	<option>2001</option>
</select>
<td/>
<td>
      <input type="button" value=">>" onclick="passer_droite()">
</td>
<td>
	<input type="button" value="<<" onclick="passer_gauche()">
</td>

j'ai bricolé une fonction qui me permet de passer un valeur à la fois :

Code :

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

1
2
3
4
5
6
7
 
function passer_droite(){
 
var valeur_liste =document.getElementById('annee_ref').options[document.getElementById('annee_ref').selectedIndex].text;
var long_liste = document.getElementById('out').length;
document.getElementById('out')[long_liste] = new Option(valeur_liste);
	}

Or mon select a l'attribut 'multiple', j'aimerais donc faire passer plusieurs valeurs à la fois, je me doute que je dois utiliser une boucle for, mais je n'arrive pas à intégrer celle-ci dans ce script.

Si quelqu'un peut m'orienter vers une solution, je suis preneur...

**vermine** · 17/05/2010, 12h23

Bonjour,

Puique vous êtes en select multiple, il vaut mieux préciser le name ainsi:

Code :

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

1
2
 
name="anneeRef[]"

Si je ne m'abuse, vous récupérez les éléments qui ont ce nom et vous obtenez un array des options sélectionnées que vous pouvez parcourir aisément.

Edit: Mais je m'abuse.

Mieux vaut se servir de la FAQ.

**socaw** · 17/05/2010, 14h57

Ça fonctionne, voilà mon code complet :

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
<SCRIPT LANGUAGE="JavaScript">
<!--
function passer_droite()
{
var option = document.getElementById('annee_ref').options;
var selected_option = new Array ();
/*récupération des valeurs sélectionnée et assignation dans l'arrey selected_option */
for (i=0; i<option.length; i++){
	if(option[i].selected){
		selected_option[selected_option.length]=option[i].text;
			}
	}
/*insertion d'une nouvelle option a la deuxième liste pour chaque valeur récupérée plus haut */
for (i=0; i<selected_option.length; i++){
	var liste_length = document.getElementById('out').length;
	document.getElementById('out')[liste_length] = new Option(selected_option[i]);
		}
}
 
function passer_gauche()
{
document.getElementById('out')[length] = null;
}
// -->
</SCRIPT>
<body>
<fieldset><legend>Test</legend>
	<table>
		<tr>
			<td>Année de référence<td/>
			<td>
				<select id="annee_ref" name="anneeRef[]" multiple="multiple" size="5">
					<option>1999</option>
					<option>2000</option>
					<option>2001</option>
				</select>
			<td/>
			<td>
				<input type="button" value=">>" onclick="passer_droite()">
			</td>
			<td>
				<input type="button" value="<<" onclick="passer_gauche()">
			</td>
			<td>
				<select id="out" name="sortie" multiple="multiple" size="5">
				</select>
			</td>
		</tr>
	</table>
</fieldset>
</body>
</html>

J'ai rajouté une deuxième fonction, qui permet d'enlever un élément qui vient d'être basculé dans l'autre liste. Mais cette fonction n'enlève pas l'élément que je sélectionne mais bien le premier élément. Je suppose qu'il y a moyen d'enlever l'élément de son choix ?

ps : je suis débutant en JavaScript, donc si vous avez la moindre remarque sur la manière dont je code, n'hésitez pas !

**vermine** · 17/05/2010, 15h06

Vous devez récupérer les éléments sélectionnés de la même manière.
Est-ce bien le comportement que vous voulez avoir ? La liste de gauche ne se vide pas quand l'élément passe à droite. C'est peut-être un choix mais dans ce cas-là, on peut ajouter x fois la même option à droite.

**socaw** · 17/05/2010, 16h24

La liste de gauche ne se vide pas quand l'élément passe à droite

En y réfléchissant, il est vrai que je ne veux pas avoir plusieurs fois un élément de gauche qui passe à droite... il faut donc que la liste de gauche se vide pour remplir celle de droite et inversement avec l'autre fonction.
Mais dans ce cas là, je suis un peu perdu quant à la méthode à utiliser.

**socaw** · 18/05/2010, 14h23

J'aurais encore une question.
J'aimerais que toutes les valeurs que je bascule de la liste de gauche vers la liste de droite soient automatiquement sélectionnées (= surlignées en bleu). Je me suis donc inspiré de la FAQ http://javascript.developpez.com/faq...ps#modifSelect.

Ce qui donne :

Code :

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

1
2
3
4
5
6
 
for (i=0; i<selected_option.length; i++){
var liste_length = document.getElementById(\'out\').length;
document.getElementById(\'out\')[liste_length] = new Option(selected_option[i]);
document.getElementById(\'out\').options[i].selected = true;
}

Or, il n'y a que la première valeur basculée qui est sélectionnée, les suivantes ne le sont pas.
Comment faire pour qu'elles le soient toutes ?

**vermine** · 18/05/2010, 14h32

Voici déjà une autre version de votre code:

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
 
<SCRIPT LANGUAGE="JavaScript">
<!--
function passer(ajout, suppression)
{
   var ajouter = document.getElementById(ajout);
   var supprimer = document.getElementById(suppression);
   var selected_option = new Array ();
 
   /*récupération des valeurs sélectionnée et assignation dans l'arrey selected_option */
   for (i=0; i<supprimer.options.length; i++){
	   if(supprimer.options[i].selected){
		   selected_option[selected_option.length]=supprimer.options[i].text;
		}
	}
 
	/*supprimer l'option de la liste pour chaque valeur récupérée plus haut */
   for (i=0; i<supprimer.options.length; i++){
	   if(supprimer.options[i].selected){
		   supprimer.options[i]= null;
		   i--;
		}
	}
 
   /*insertion d'une nouvelle option a l'autre liste pour chaque valeur récupérée plus haut */
   for (i=0; i<selected_option.length; i++){
	   ajouter[ajouter.length] = new Option(selected_option[i]);
	}
}
 
// -->
</SCRIPT>
<body>
<fieldset><legend>Test</legend>
	<table>
		<tr>
			<td>Année de référence<td/>
			<td>
				<select id="annee_ref" name="anneeRef[]" multiple="multiple" size="5">
					<option>1999</option>
					<option>2000</option>
					<option>2001</option>
				</select>
			<td/>
			<td>
				<input type="button" value=">>" onclick="passer('out', 'annee_ref')">
			</td>
			<td>
				<input type="button" value="<<" onclick="passer('annee_ref', 'out')">
			</td>
			<td>
				<select id="out" name="sortie" multiple="multiple" size="5">
				</select>
			</td>
		</tr>
	</table>
</fieldset>
</body>
</html>

Je passe les id en paramètres car la fonction est la même en fait sauf qu'une fois c'est dans un sens et une fois dans l'autre.

**vermine** · 18/05/2010, 14h41

Code :

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

1
2
3
document.getElementById(\'out\')[liste_length] = new Option(selected_option[i]);
document.getElementById(\'out\').options[i].selected = true;

Vous ajouter l'option "i" mais vous l'ajouter à l'indice d'une liste qui n'égale pas "i".

Donc dans le code que je viens d'envoyer, ça donnerait ceci:

Code :

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

1
2
3
4
5
6
/*insertion d'une nouvelle option a l'autre liste pour chaque valeur récupérée plus haut */
for (i=0; i<selected_option.length; i++){
     ajouter[ajouter.length] = new Option(selected_option[i]);
     ajouter.options[ajouter.length-1].selected = true;
}

Pourquoi "-1" ? Parce que juste avant j'ai ajouté une option à la liste donc la taille c'est agrandie.

J'ai ajouté deux boucles entre la suppression et l'insertion pour tout désélectionner car sinon les options restaient sélectionné d'une fois à l'autre:

Code :

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

1
2
3
4
5
6
7
8
 
/*désélectionner tout*/
for (i=0; i<ajouter.length; i++){
     ajouter.options[i].selected = false;
}
for (i=0; i<supprimer.length; i++){
     supprimer.options[i].selected = false;
}