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

Version imprimable

08/10/2011, 23h36
Décibel

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

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:

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

Si vous avez une idée...
09/10/2011, 09h16
Décibel

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 ?
09/10/2011, 11h00
beegees
Bonjour,

Ce que je ferais :

Je passerais this.value (lavaleur) et :
Code:

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
09/10/2011, 12h46
Décibel

Arrgg...
Merci mais je mets ce code où et comment...
Je ne comprends pas grand chose au JavaScript, toutes mes excuses...
09/10/2011, 16h52
headmax

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.

Voila le code pour les selects :

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

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 !

09/10/2011, 18h14
Eric2a

Salut,

Code:

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

Re,

Je t'ai créé un petit exemple :

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

09/10/2011, 19h10
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 ?

Mais je viens de voir le code d'Eric et j'ai donc ma réponse, merci à vous tous !!!
09/10/2011, 19h12
beegees

Citation:

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:

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

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

beegees
09/10/2011, 19h26
Décibel

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

Merci !!!