Changer de liste dans une liste déroulante

**momjunior** · 06/05/2015, 18h24

Bonjour

J'ai 2 listes déroulantes, la 1ère contient la liste des pays: Espagne, France, Italie et la 2e contient les villes : Barcelone,Madrid,Séville, Lille, Lyon, Paris, Milan,Rome.

Je voudrais faire ceci: lorsque je clique par exemple sur Espagne, la liste de la 2e liste déroulante sera : Barcelone,Madrid,Séville; lorsque je clique sur France, la 2e liste déroulante sera Lille, Lyon, Paris...ainsi de suite.

J'aimerais donc que ma 2e liste déroulante soit remplie en fonction du pays que j'ai choisi dans la 1ere liste déroulante.

Le code que j'ai permet seulement de changer la valeur de la 2e liste déroulante et toute la liste:

Code :

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

1
2
3
4
5
6
7
8
<script language="javascript">
            function changerVille() {
    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>

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="styled-select">
    <select  id="pays" onchange="changerVille()">
        <option value="select">Sélectionnez un</option>
        <option value="Barcelone-Espagne">Doutchi</option>
        <option value="Lille-France">Lille</option>
        <option value="Rome-Italie">Rome</option>
    </select>
</div>
<div class="styled-select">
    <select  id="ville">                                                  
        <option id="Espagne" value="Espagne">Espagne</option>
        <option id="France" value="France">France</option>
        <option id="Italie" value="Italie">Italie</option>
    </select>
</div>

Merci

**melka one** · 06/05/2015, 19h51

jour

il y a contradiction entre ce qui doit ce faire et le code

essai ceci

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
57
58
59
60
61
62
63
64
 
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
 
<script>
 
var tb_pv={
 
France:["Lille","Lyon","Paris"],
Espagne:["Barcelone","Madrid","Séville"],
Allemagne:["bone","berlin","munich"],
Italie:["rome","turin","milan","venise"]
}
 
function changerVille(lui) {
 
	var pays = lui.value;
 
	document.getElementById("ville").innerHTML=''
 
	for ( var i = 0 ; i < tb_pv[pays].length ; i++) {
 
		var ville=tb_pv[pays][i]
 
		var elem=document.createElement('option')
		elem.setAttribute('value',ville)
 
		var text = document.createTextNode(ville)
		elem.appendChild(text)
 
		document.getElementById('ville').appendChild(elem)
	}
}
</script>
</head>
<body>
 
<div class="styled-select">
<select  onchange="changerVille(this)">  
 
<option selected="selected" value="France">France</option>
<option value="Espagne">Espagne</option>
<option  value="Allemagne">Allemagne</option>
<option  value="Italie">Italie</option>
 
</select>
</div>
 
<br><br><br>
 
  <div class="styled-select">
<select  id="ville">
 
<option value="select">Sélectionnez un</option>
<option value="Paris">Paris</option>
<option value="Lille">Lille</option>
<option value="Lyon">Lyon</option>
 
</select>
</div>
</body>
</html>

**momjunior** · 12/05/2015, 18h10

Merci beaucoup, ça marche.

Changer de liste dans une liste déroulante

JavaScript

Discussions similaires

Partager

Partager