Changer de liste dans une liste déroulante

Version imprimable

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:

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:

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

jour

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

essai ceci

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

12/05/2015, 18h10
momjunior

Merci beaucoup, ça marche.