boucle $.each et append en JQuery

Version imprimable

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:

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:

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.

Pardon d'avoir posté trop vite, j'ai trouvé l'erreur : Je suis parti d'un fichier CSV contenant une liste de codes postaux et les libellés d'acheminement correspondants. puis j'ai trouvé un site qui permet de le convertir en JSON : ici. J'ai trouvé que le résultat était sympathique, puisqu'il permettait de faire directement une recherche par code postal, car chaque code postal est un objet. Seulement, avec la conversion, il y a un effet indésirable : mon fichier CSV contient toutes les villes pour chaque code postal, mais le fichier JSON ne retient que la dernière.

Conclusion : le code est correct, mais c'est le fichier Json qui est mal foutu !

En sélectionnant "array", la structure est respectée. Mon code devient donc :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script> $(document).ready(function(){ $('#cp').change(function(){ $('#ville').html(''); $.getJSON('js/codes_postaux.json',function(data){ $.each(data,function(key,value){ if(value.Code_postal==$('#cp').val()){ $('#ville').append('<option value="'+value.Libelle_acheminement+'">'+value.Libelle_acheminement+'</option>'); } }); }); }); }); </script>
Bon, bah, la question est résolue, alors.
J'espère que cela pourra servir à quelqu'un, je n'aurai pas posté pour rien... A bientôt

30/10/2016, 20h16
Markos22

Liste déroulante "virtuelle" en JQuery

Hep ! C'est pas fini ! Ça fonctionne super bien comme exercice, dans l'abstrait, en HTML, mais dès qu'on soumet le formulaire, surprise !! Une erreur apparaît : la liste déroulante, bien affichée en JQuery, semble virtuelle : lorsque l'on soumet le formulaire, le champ ville (celui du "select" en JQuery) est "null". Quelqu'un saurait-il comment y remédier ?

...Oups ! Là encore, je laisse le dernier post pour qu'il serve à quelqu'un : erreur de débutant : j'ai oublié l'attribut "name" de mon "select" ! Pensez-y : c'est lui qui permet de transmettre la valeur sélectionnée au serveur. Ne confondez pas "id", qui sert à identifier l'élément, et "name", dont la principale fonction est de transmettre au serveur la valeur entrée par l'utilisateur dans l'élément du formulaire.

A bientôt ! ;-)