Discussion :

[Auteur]

Comment ajouter des options dans une liste déroulante à partir d'une autre ?
http://javascript.developpez.com/faq...js#SelectListe

Voici la mise à jour proposée :

• suppression des balises <table> dans le code HTML
• suppression des styles en ligne des balises select
• indentation du code HTML et JS
• refonte complète du code JS : une fonction est utilisée au lieu de 2

Comment ajouter des options dans une liste déroulante à partir d'une autre ?

Voici le code javascript :

Code javascript :

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
 
// La fonction prend en paramètre l'id de la liste de départ et l'id de la liste d'arrivée
function ajout(nomListeDep, nomListeArr)	
{
	var idx;
	var listeDep, listeArr;
	var op;
 
	listeDep = document.getElementById(nomListeDep);
	idx = listeDep.options.selectedIndex;
	if (idx == 0)
	{
		alert("Sélectionnez une option");
		return false;
	}
 
	// Ajout de l'option sélectionnée dans la liste d'arrivée
	listeArr = document.getElementById(nomListeArr);
	op = new Option(listeDep.options[idx].text, listeDep.options[idx].value, true);
	listeArr.add(op);
 
	// suppression de l'option cliquée dans la liste de départ
	listeDep.options[idx] = null;	
}

voici le code HTML du formulaire

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<select name="depart" id="depart" size="5" ondblclick="ajout('depart','arrive')">
	<option value="0">Double clic pour sélectionner un client</option>
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
	<option value="4">Option 4</option>
</select>
 
<select name="arrive" id="arrive" size="5" ondblclick="ajout('arrive','depart')">
	<option value="0">Double clic pour supprimer un client</option>
</select>

[NoSmoking]

Bonjour,
on pourrait faire plus rapide/simple via un appendChild qui déplacera l'option double cliquée.

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
function ajout(nomListeDep, nomListeArr)
{
	var idx;
	var listeDep, listeArr;
	var op;
 
	listeDep = document.getElementById(nomListeDep);
	idx = listeDep.options.selectedIndex;
	if (idx == 0)
	{
		alert("Sélectionnez une option");
		return false;
	}
 
	// Ajout de l'option sélectionnée dans la liste d'arrivée
	listeArr = document.getElementById(nomListeArr);
// plus utile	op = new Option(listeDep.options[idx].text, listeDep.options[idx].value, true);
	// transfert d'un SELECT à l'autre
	listeArr.appendChild(listeDep.options[idx]);
 
	// suppression de l'option cliquée dans la liste de départ
// plus utile	listeDep.options[idx] = null;
}