Listes déroulantes liées vides

**kate59** · 04/03/2019, 23h00

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:

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);
}
 
?>

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
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>');
		}
	});
});

merci pour votre aide.

**CosmoKnacki** · 04/03/2019, 23h04

Code HTML :

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

1
2
3
<select id="code_postal">
    <option value="">Choisir la localité un</select>
</select>

Y'a rien qui te choque là? Un bon outil: W3C Validation Service

Code php :

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

$requete = "SELECT * FROM servicepublic WHERE code_postal = '".$_GET['code_postal']."' ORDER BY commune ASC";

Ce n'est pas comme ça qu'on fait une requête préparée: PDO::prepare

Code php :

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

$json[$donnees["commune"]][] = utf8_encode($donnees["commune"]);

Pourquoi ne pas avoir directement stocké les informations dans ta base de données en utf-8?

**kate59** · 04/03/2019, 23h13

oui en effet merci mais toujours les listes vides. après correction :

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="codepostal">
        	<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>

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['codepostal']) || isset($_GET['commune'])) {
        // connexion à la base de données
        try {
                $bdd = new PDO('xxxxx')
        } 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['codepostal'])) {
                // requête qui récupère les localités un
                $requete = "SELECT * FROM servicepublic WHERE code_postal = '".$_GET['codepostal']."' 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);
}
 
?>

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 = $('#codepostal');
	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
				$('#codepostal').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: 'codepostal='+ 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>');
		}
	});
});

merci pour votre aide

**CosmoKnacki** · 04/03/2019, 23h17

Ok, respire profondément et relis l'extrait que j'ai mis dans mon précédent post, ça n'a rien à voir avec le caractère souligné. Dés fois les choses sont tellement énormes qu'on ne les voit pas, parce qu'on a la tête dans le guidon.

**kate59** · 04/03/2019, 23h19

c'est un code que j'ai trouvé je souhaitez deja la faire fonctionner en test avant de le corriger et l'applique.

Je souhaite installer 3 select alimenter d'une même table qui sont lié avec du ajax

Et c'est un des seules codes 3 select que j'ai trouve de base mon site est en pdo et mysql.

merci pour votre aide.

**kate59** · 04/03/2019, 23h23

j'ai vu tu a raison c'est enorme.

Code :

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

1
2
3
4
5
6
7
8
9
        <select id="codepostal" name="codepostal">
        	<option value="">Choisir la localité un</option>
        </select>
        <select id="commune" name="commune">
        	<option value="">Choisir la localité deux</option>
        </select>
        <select id="localite_trois" name="localite_trois">
        	<option value="">Choisir la localité trois</option>
        </select>

aucun changement sinon au niveau des listes vides.

a part les phrases Choisir la localité deux, Choisir la localité trois, Choisir la localité un.

j'ai modifier le :

equete = "SELECT * FROM servicepublic WHERE code_postal = '".$_GET['codepostal']."' ORDER BY commune ASC";

merci pour ton aide c'est select vont me rendre folle.

Listes déroulantes liées vides

AJAX

Vue hybride

Discussions similaires

Partager

Partager