Changer valeur d'une liste déroulante en fonction d'une autre liste déroulante

**momjunior** · 10/10/2014, 15h45

Bonjour

J'ai un formulaire contenant 2 listes déroulantes.

La 1ère contient une liste de pays (France , Allemagne,Brésil, Sénégal, Chine, etc...) et la 2e , une liste de continents (Afrique, Europe, Amérique, etc...). J'aimerais donc faire ceci:

Si je choisis par exemple "France" dans la 1ère liste déroulante, la valeur de la 2e liste déroulante sera automatiquement "Europe".

Si je choisis "Sénégal", la valeur dans la 2e liste sera "Afrique".

Voici le contenu de ma page test:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Formulaire</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <script language="javascript">
            function changerContinent() {
    var x = document.getElementById("pays").selectedIndex;
    var y = document.getElementById("pays").options;
    var z = y[x].value.lastIndexOf("-");
    document.getElementById(y[x].value.substr(z+1)).selected = "true";
  }
 
       </script>
   </head>
   <body>
      <form action="" id="search-form">
       <select id="pays" onchange="changerContinent()">
  <option value="France-Europe">France</option>
  <option value="Allemagne-Europe">Allemagne</option>
  <option value="Brésil-Amérique">Brésil</option>
  <option value="Chine-Asie">Chine</option>
</select>
 
<select id="continent">
  <option id="Europe" value="Europe">Europe</option>
  <option id="Amérique" value="Amérique">Amérique</option>
  <option id="Asie" value="Asie">Asie</option>
</select>
</form>
   </body>
</html>

Et ça marche. Maintenant quand j'ajoute le morceau de code ci-dessus dans la page index.html de mon application, ça ne marche pas:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script language="javascript">
            function changerContinent() {
    var x = document.getElementById("pays").selectedIndex;
    var y = document.getElementById("pays").options;
    var z = y[x].value.lastIndexOf("-");
    document.getElementById(y[x].value.substr(z+1)).selected = "true";
  }
</script>
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="js/cufon-yui.js" type="text/javascript"></script>
    <script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_400.font.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_900.font.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jqtransform.js" ></script>
<script type="text/javascript">
    $(function(){
        $('#search-form, #agent-search-form').jqTransform({imgPath:'jqtransformplugin/img/'});
    });
 
</script>
 
</head>
 
<body id="page1">
...
 
<form action="" id="search-form">
       <select id="pays" onchange="changerContinent()">
  <option value="France-Europe">France</option>
  <option value="Allemagne-Europe">Allemagne</option>
  <option value="Brésil-Amérique">Brésil</option>
  <option value="Chine-Asie">Chine</option>
</select>
 
<select id="continent">
  <option id="Europe" value="Europe">Europe</option>
  <option id="Amérique" value="Amérique">Amérique</option>
  <option id="Asie" value="Asie">Asie</option>
</select>
</form>
 
...
 
</body>

D'où peut venir le problème?

Merci

**SpaceFrog** · 10/10/2014, 15h48

si tu regardes juste au dessus de ton post dans la liste
http://www.developpez.net/forums/d59...s-liees-entre/

**momjunior** · 10/10/2014, 17h01

En fait j'ai déjà le code qui permet de lier deux listes déroulantes. Mais quand j'ajoute ce code dans ma page index.html ça ne marche pas. J'aimerais donc savoir ce quel est l'élément bloquant.

**SpaceFrog** · 10/10/2014, 17h04

certes mais bon quand je vois du code avec

Code :

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

language="javascript"

ça ne se fait plus depuis 1912

**momjunior** · 10/10/2014, 17h41

Pourtant dans ma page test ça marche. Mais bon, je l'ai remplacé par:

Code :

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

<script type="text/javascript">

Et ça ne marche toujours pas.

**SpaceFrog** · 13/10/2014, 08h46

Vu que tu utilises jquery ...
il suffit sur le change du pays d'attribuer la valeur au second select ...

AuU passage les id sur les options sont inutiles

http://jsfiddle.net/3zfehg7t/

**momjunior** · 13/10/2014, 20h40

Bon finalement ça marche. Je ne sais vraiment pas comment j'ai fait

... mais ça marche

Merci

Changer valeur d'une liste déroulante en fonction d'une autre liste déroulante

JavaScript

Discussions similaires

Partager

Partager