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 ?

bascule entre liste

JavaScript

Vue hybride

Discussions similaires

Partager

Partager