Bonjour,
je souhaite afficher 3 liste déroulante mais les listes sont vides.
index.html:
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 <html> <head> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="liste.js"></script> </head> <body> <select id="code_postal"> <option value="">Choisir la localité un</select> </select> <select id="commune"> <option value="">Choisir la localité deux</select> </select> <select id="localite_trois"> <option value="">Choisir la localité trois</select> </select> </body> </html>
test.php:
liste.js:
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 <?php // Vérification des paramètres d'accès au fichier liste.php if(isset($_GET['go']) || isset($_GET['code_postal']) || isset($_GET['commune'])) { // connexion à la base de données try { $bdd = new PDO('mysql:host=xxxxxx;dbname=xxx', 'xxe', 'xxx'); } catch(Exception $e) { exit('Impossible de se connecter à la base de données.'); } $json = array(); if(isset($_GET['go'])) { // requête qui récupère les localités un $requete = "SELECT * FROM servicepublic ORDER BY code_postal ASC"; // exécution de la requête $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo())); // Création de la liste while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) { // je remplis un tableau et mettant l'id en index $json[$donnees["code_postal"]][] = $donnees["code_postal"]; } } elseif(isset($_GET['code_postal'])) { // requête qui récupère les localités un $requete = "SELECT * FROM servicepublic WHERE code_postal = '".$_GET['code_postal']."' ORDER BY commune ASC"; // exécution de la requête $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo())); // Création de la liste while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) { // je remplis un tableau et mettant l'id en index $json[$donnees["commune"]][] = utf8_encode($donnees["commune"]); } } elseif(isset($_GET['commune'])) { // requête qui récupère les localités un $requete = "SELECT * FROM servicepublic WHERE commune = '".$_GET['commune']."' ORDER BY nom_service_public ASC"; // exécution de la requête $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo())); // Création de la liste while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) { // je remplis un tableau et mettant l'id en index $json[$donnees["nom_service_public"]][] = utf8_encode($donnees["nom_service_public"]); } } // envoi du résultat au success echo json_encode($json); } ?>
merci pour votre aide.
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
65
66
67
68
69
70 // JavaScript Document $(document).ready(function() { var $code_postal = $('#code_postal'); var $commune = $('#commune'); var $localite_trois = $('#localite_trois'); // chargement de la liste de localité un $.ajax({ url: 'liste.php', data: 'go', // on envoie $_GET['go'] dataType: 'json', // on veut un retour JSON success: function(json) { $.each(json, function(index, value) { // pour chaque noeud JSON // on ajoute l option dans la liste $('#code_postal').append('<option value="'+ index +'">'+ value +'</option>'); }); } }); // à la sélection de la localité un dans la liste $code_postal.on('change', function() { var val = $(this).val(); // on récupère la valeur de la localité un if(val != '') { $commune.empty(); // on vide la liste de localité deux $commune.append('<option value="">Choisir la localité deux</option>'); $.ajax({ url: 'liste.php', data: 'code_postal='+ val, // on envoie $_GET['code_postal'] dataType: 'json', success: function(json) { $.each(json, function(index, value) { $commune.append('<option value="'+ index +'">'+ value +'</option>'); }); } }); } else { $commune.empty(); $commune.append('<option value="">Choisir la localité deux</option>'); $localite_trois.empty(); // on vide la liste de localité deux $localite_trois.append('<option value="">Choisir la localité trois</option>'); } }); // à la sélection de la localité deux dans la liste $commune.on('change', function() { var val = $(this).val(); // on récupère la valeur de la localité deux if(val != '') { $localite_trois.empty(); // on vide la liste de localité trois $localite_trois.append('<option value="">Choisir la localité trois</option>'); $.ajax({ url: 'liste.php', data: 'commune='+ val, // on envoie $_GET['commune'] dataType: 'json', success: function(json) { $.each(json, function(index, value) { $localite_trois.append('<option value="'+ index +'">'+ value +'</option>'); }); } }); } else { $localite_trois.empty(); $localite_trois.append('<option value="">Choisir la localité trois</option>'); } }); });
Partager