Mise à jour d'un select à partir d'un autre

**Décibel** · 08/10/2011, 23h36

Bonjour,

Je ne comprends pas grand chose au JavaScript et ce que je cherche me semble simple mais je ne le trouve pas dans la faq...

J'ai un formulaire qui demande l'adresse de facturation à un internaute, puis sous ce formulaire le même pour l'adresse de livraison.
Dans le formulaire pour l'adresse de facturation il y a un select avec une liste de pays, et un bouton permet de recopier directement l'adresse de facturation dans l'adresse de livraison si elles sont identiques.
Mais le pays de livraison (dans le select) ne prend pas la bonne valeur ???

Mon code dans mon bouton pour le select est :

Code :

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

document.getElementById('Pays_livraison').options[document.getElementById('Pays').value].selected = true;

Si vous avez une idée...

**Décibel** · 09/10/2011, 09h16

Je viens de voir que la mise à jour du deuxième select se fait dans l'ordre d'affichage...
C'est à dire que si dans le premier select je choisi la "Chine" qui a comme id 15, dans le deuxième c'est la 15ème ligne qui s'affiche...

C'est quoi alors qui ne va pas, merci de votre aide ?

**beegees** · 09/10/2011, 11h00

Bonjour,

Ce que je ferais :

Je passerais this.value (lavaleur) et :

Code :

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

1
2
3
4
5
6
7
8
 
for (i=0; i<list.length; i++)
					{ 
						if (list.options[i].value==lavaleur[1]) 
						{ 
							list.options.selectedIndex = i; 
						} 
					}

Cela devrait t'aider un peu je pense.

Je reste à ta disposition pour d'amples renseignements.

Bon dimanche.

beegees

**Décibel** · 09/10/2011, 12h46

Arrgg...
Merci mais je mets ce code où et comment...
Je ne comprends pas grand chose au JavaScript, toutes mes excuses...

**headmax** · 09/10/2011, 16h52

Ou est ton code HTML de tes deux select, et ton code complet js?
Sans ça je vois pas trop comment t'aider rapidement et efficacement.

**Décibel** · 09/10/2011, 17h17

Voila le code pour les selects :

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
 
// le code HTML pour Pays
 
<select name="Pays" id="Pays">
<option value="0">Choisir votre pays</option>
<option value="32">Albanie</option>
<option value="12">Allemagne</option>
<option value="43">Andorre</option>
<option value="33">Arménie</option>
<option value="21">Autriche</option>
<option value="34">Azebaédjan</option>
<option value="11">Belgique</option>
<option value="44">Bielorussie</option>
<option value="36">Bosnie-Herzégovine</option>
<option value="37">Bulgarie</option>
<option value="55">Canada</option>
<option value="59">Chine</option>
<option value="38">Chypre</option>
<option value="15">Danemark</option>
<option value="3">Espagne</option>
<option value="40">Estonie</option>
<option value="4">Etats Unis</option>
<option value="56">Etats-Unis</option>
<option value="20">Finlande</option>
<option value="1">France</option>
<option value="50">Georgie</option>
...
</select>
 
// le code HTML pour Pays_livraison
 
<select name="Pays_livraison" id="Pays_livraison">
<option value="0">Choisir votre pays</option>
<option value="32">Albanie</option>
<option value="12">Allemagne</option>
<option value="43">Andorre</option>
<option value="33">Arménie</option>
<option value="21">Autriche</option>
<option value="34">Azebaédjan</option>
<option value="11">Belgique</option>
<option value="44">Bielorussie</option>
<option value="36">Bosnie-Herzégovine</option>
<option value="37">Bulgarie</option>
<option value="55">Canada</option>
<option value="59">Chine</option>
<option value="38">Chypre</option>
<option value="15">Danemark</option>
<option value="3">Espagne</option>
<option value="40">Estonie</option>
<option value="4">Etats Unis</option>
<option value="56">Etats-Unis</option>
<option value="20">Finlande</option>
<option value="1">France</option>
<option value="50">Georgie</option>
...
</select>

et le JavaScript

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function copierChamp ()
{
   document.getElementById('Societe_Livraison').value = document.getElementById('Societe').value;
   document.getElementById('Nom_Livraison').value = document.getElementById('Nom').value;
   document.getElementById('Prenom_Livraison').value = document.getElementById('Prenom').value;
   document.getElementById('Adresse_Livraison').value = document.getElementById('Adresse').value;
   document.getElementById('CP_Livraison').value = document.getElementById('CP').value;
   document.getElementById('Ville_Livraison').value = document.getElementById('Ville').value;
   document.getElementById('Tel_Livraison').value = document.getElementById('Tel').value;
document.getElementById('Pays_livraison').options[document.getElementById('Pays').value].selected = true;
}

Merci !

**Eric2a** · 09/10/2011, 18h14

Salut,

Code :

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

document.getElementById('Pays_livraison').options[document.getElementById('Pays').selectedIndex].selected = true;

**beegees** · 09/10/2011, 18h25

Re,

Je t'ai créé un petit exemple :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
	function changer_autre_liste(valeur, liste)
	{
		document.getElementById(liste).options.selectedIndex = valeur;
	}
</script>
</head>
 
<body>
 
<select name="Pays" id="Pays" onchange="changer_autre_liste(this.selectedIndex, 'Pays_livraison');">
    <option value="0">Choisir votre pays</option>
    <option value="32">Albanie</option>
    <option value="12">Allemagne</option>
    <option value="43">Andorre</option>
    <option value="33">Arménie</option>
    <option value="21">Autriche</option>
    <option value="34">Azebaédjan</option>
    <option value="11">Belgique</option>
    <option value="44">Bielorussie</option>
    <option value="36">Bosnie-Herzégovine</option>
    <option value="37">Bulgarie</option>
    <option value="55">Canada</option>
    <option value="59">Chine</option>
</select>
 
<select id="Pays_livraison">
	<option value="0">Choisir votre pays</option>
    <option value="32">Albanie</option>
    <option value="12">Allemagne</option>
    <option value="43">Andorre</option>
    <option value="33">Arménie</option>
    <option value="21">Autriche</option>
    <option value="34">Azebaédjan</option>
    <option value="11">Belgique</option>
    <option value="44">Bielorussie</option>
    <option value="36">Bosnie-Herzégovine</option>
    <option value="37">Bulgarie</option>
    <option value="55">Canada</option>
    <option value="59">Chine</option>	
</select>
 
</body>
</html>

Il vaut mieux séparer le code js dans une autre page, mais c'était juste pour te montrer comment on fait.

Mon code javascript est générique, cela veut dire que tu passes le nom de la liste déroulante que tu veux modifier et c'est tout.

Pas besoin de créer une ligne de code par liste déroulante.

Testé avec IE9 et Google chrome.

Bonne fin de W.E.

beegees

**Décibel** · 09/10/2011, 19h10

Waouu, merci c'est génial et ça marche !

Juste une question, s'il y a d'autres select dans la page cela ne va pas créer des erreurs ?

Il serait possible de mettre le nom des select dans ta programmation ?

Mais je viens de voir le code d'Eric et j'ai donc ma réponse, merci à vous tous !!!

**beegees** · 09/10/2011, 19h12

Envoyé par Décibel

Waouu, merci c'est génial et ça marche !

Juste une question, s'il y a d'autres select dans la page cela ne va pas créer des erreurs ?

Il serait possible de mettre le nom des select dans ta programmation ?

Quel code fonctionne ? le mien ?

Si c'est le cas, il te suffit de passer le nom de la liste de sélection et this.selectedIndex (générique)

Exemple pour une liste déroulante qui s'appelle "FacturationVille"

Code :

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

onchange="changer_autre_liste(this.selectedIndex, 'FacturationVille');"

tu ne dois rien changer dans la fonction js, jamais.

beegees

**Décibel** · 09/10/2011, 19h26

Les 2 codes marchent très bien !
le tien et celui d'Eric

Merci !!!

Mise à jour d'un select à partir d'un autre

JavaScript

Discussions similaires

Partager

Partager