Bonjour,

J'ai un formulaire qui contient un champ code postal et une liste déroulante pour les villes. J'ai un fichier JSON libellé comme suit :
Code json : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
{
  "10000": {
    "Libelle_acheminement": "TROYES"
  },
  "10100": {
    "Libelle_acheminement": "GELANNES"
  },
  "10110": {
    "Libelle_acheminement": "POLISY"
  },...

Et voici le code de ma page :

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
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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Essai codes postaux</title>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
	<div class="container">
		<form action="#">
			<div class="form-group">
				<label for="nom">Nom</label>
				<input type="text" class="form-control" name="nom" id="nom">
			</div>
			<div class="form-group">
				<label for="prenom">Prénom</label>
				<input type="text" class="form-control" name="prenom" id="prenom">
			</div>
			<div class="form-group" style="float: left;">
				<label for="cp">Code Postal</label>
				<input type="text" class="form-control" name="cp" id="cp">
			</div>
			<div class="form-group" style="margin-left: 200px">
				<label for="ville">Ville</label>
				<select class="form-control" id="ville"></select>
			</div>
			<input type="submit" value="envoi">
 
		</form>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script>
                $(document).ready(function(){
                        $('#cp').change(function(){
                                $('#ville').html('');
                                $.getJSON('js/codes_postaux.json',function(data){
                                        $.each(data,function(key,value){
                                                if(key==$('#cp').val()){
                                                        $('#ville').append('<option value="'+value.Libelle_acheminement+'">'+value.Libelle_acheminement+'</option>');
                                                }
                                        });
                                });
                        });
                });
        </script>
</body>
</html>

Ça se passe presque bien, excepté un petit détail énervant et incompréhensible : ma liste déroulante ne contient qu'un seul élément : la dernière correspondance rencontrée dans le fichier json ! Je pensais que la méthode append() ajoutait un contenu à la fin de l'élément, sans effacer les autres. Ce n'est pas comme ça ?

Merci de vos suggestions.