3 listes liées

**baddevil** · 29/04/2014, 22h48

bonsoir, j ai récupéré sur le net un code ajax pour liée 3 liste, je l ai testé en local et il fonctionne, j ai voulu l adapté pour ma situation

a première vu j ai cru qu' il fonctionnait, cependant le résultat sur mon select 3 n est pas bon et je sais pas pourquoi

j ai mis ma liste liée en ligne pour que vous puissiez comprendre concrètement a cette adresse http://www.creaweb68.fr/CW/autotran/liste_dynamique/

si dans le select catégorie on choisi CABRIOLET le 2 eme donne Peugeot... jusque la tout va bien mais si je click sur Peugeot il me renvoi dans le troisième select plusieurs modèle alors que j en possède Qu' un dans ma base ..

voici le code que j utilise:

mon ajax

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
71
 
// JavaScript Document
$(document).ready(function() {
	var $Carosserie = $('#Carosserie');
	var $Marque = $('#Marque');
	var $Modele = $('#Modele');
 
	// 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
				$('#Carosserie').append('<option value="'+ index +'">'+ value +'</option>');
			});
		}
	});
 
	// à la sélection de la localité un dans la liste
	$Carosserie.on('change', function() {
		var val = $(this).val(); // on récupère la valeur de la localité un
		if(val != '') {
			$Marque.empty(); // on vide la liste de localité deux
			$Marque.append('<option value="">Marque</option>');
 
			$.ajax({
				url: 'liste.php',
				data: 'Carosserie='+ val, // on envoie $_GET['localite_un']
				dataType: 'json',
				success: function(json) {
					$.each(json, function(index, value) {
						$Marque.append('<option value="'+ index +'">'+ value +'</option>');
					});
				}
			});
		}
		else {
			$Marque.empty();
			$Marque.append('<option value="">Marque</option>');
			$Modele.empty(); // on vide la liste de localité deux
			$Modele.append('<option value="">Modele</option>');
		}
	});
 
	// à la sélection de la localité deux dans la liste
	$Marque.on('change', function() {
		var val = $(this).val(); // on récupère la valeur de la localité deux
		if(val != '') {
			$Modele.empty(); // on vide la liste de localité trois
			$Modele.append('<option value="">Modele</option>');
 
			$.ajax({
				url: 'liste.php',
				data: 'Marque='+ val, // on envoie $_GET['localite_deux']
				dataType: 'json',
				success: function(json) {
					$.each(json, function(index, value) {
						$Modele.append('<option value="'+ index +'">'+ value +'</option>');
					});
				}
			});
		}
		else {
			$Modele.empty();
			$Modele.append('<option value="">Modele</option>');
		}
	});
});

mon php

Code php :

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
 
<?php
 
 
 
// Vérification des paramètres d'accès au fichier liste.php
if(isset($_GET['go']) || isset($_GET['Carosserie']) || isset($_GET['Marque'])) {
	// connexion à la base de données
	try {
		$bdd = new PDO('mysql:host=localhost;dbname=Autotransaction', 'root', '');
	} 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 DISTINCT(Carosserie) FROM autotran ";
		// 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["Carosserie"]][] = utf8_encode($donnees["Carosserie"]);
      //execute la requete,recupere les resultats et fusionne avec le modele html
 
		}
	}
	elseif(isset($_GET['Carosserie'])) {
		// requête qui récupère les localités un
		$requete = "SELECT DISTINCT(Marque) FROM autotran WHERE Carosserie = '".$_GET['Carosserie']."' ";
		// 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["Marque"]][] = utf8_encode($donnees["Marque"]);
		}
	}
	elseif(isset($_GET['Marque'])) {
		// requête qui récupère les localités un
		$requete = "SELECT DISTINCT(Modele) FROM autotran WHERE Marque = '".$_GET['Marque']."'";
		// 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["Carosserie"]][] = utf8_encode($donnees["Modele"]);
		}
	} 
	 // envoi du résultat au success
	echo json_encode($json);
}
 
?>

et mon 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
18
 
<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="Carosserie">
        	<option value="">Catégories</select>
        </select> <br />
        <select id="Marque">
        	<option value="">Marque</select>
        </select> <br />
        <select id="Modele">
        	<option value="">Modele</select>
        </select>
    </body>
</html>

merci d avance pour l aide apporté

**danielhagnoul** · 30/04/2014, 10h18

Bonjour

Merci de mettre votre exemple en ligne à jour avec un jQuery correct, soit jQuery 1.11.0 (compatible avec les navigateurs IE 8 et moins) ou jQuery 2.1.0 (non compatible).

http://jquery.com/download/

**baddevil** · 30/04/2014, 21h18

bonsoir, merci pour la réponse, j ai mis a jour le fichier jquery en 1.11.0

je penche pour un problème de requête qui prenne en compte le select 1 et le select 2 en condition pour que le select 3 affiche les résultat correct mais j en suis pas sur étant débutant

**danielhagnoul** · 30/04/2014, 23h34

Bonsoir

Faire un test avec ce code :

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
    var $Carosserie = $('#Carosserie'),
        $Marque = $('#Marque'),
        $Modele = $('#Modele'),
        jqXHRGo = $.getJSON( "liste.php", { "param" : "go" } ); // $_GET[ "param" ]
 
    jqXHRGo.done( function( data, textStatus, jqXHR ){
        // succès de la transaction, on doit traiter le contenu de data
       // console.log( data, textStatus, jqXHR );
 
        $.each( data, function( index, value ){
            $( '#Carosserie' ).append( '<option value="'+ index +'">'+ value +'</option>');
        });                
    });
 
    $Carosserie.on('change', function() {
        var val = $(this).val();
 
        if ( val != '' ){
            $Marque.empty();
            $Marque.append('<option value="">Marque</option>');
 
            var jqXHRCarosserie = $.getJSON( "liste.php", { "carosserie" : val } ); // $_GET[ "carosserie" ]
 
            jqXHRCarosserie.done( function( data, textStatus, jqXHR ){
                // succès de la transaction, on doit traiter le contenu de data
                // console.log( data, textStatus, jqXHR );
 
                $.each( data, function( index, value ){
                    $Marque.append('<option value="'+ index +'">'+ value +'</option>');
                });                
            });
        }
        else {
            $Marque.empty();
            $Marque.append('<option value="">Marque</option>');
            $Modele.empty();
            $Modele.append('<option value="">Modele</option>');
        }
    });
 
    $Marque.on('change', function() {
        var val = $(this).val();
 
        if(val != '') {
            $Modele.empty();
            $Modele.append('<option value="">Modele</option>');
 
            var jqXHRMarque = $.getJSON( "liste.php", { "marque" : val } ); // $_GET[ "marque" ]
 
            jqXHRMarque.done( function( data, textStatus, jqXHR ){
                // succès de la transaction, on doit traiter le contenu de data
                // console.log( data, textStatus, jqXHR );
 
                $.each( data, function( index, value ){
                    $Modele.append('<option value="'+ index +'">'+ value +'</option>');
                });                
            });
        }
        else {
            $Modele.empty();
            $Modele.append('<option value="">Modele</option>');
        }
    });

**ascito** · 01/05/2014, 01h24

ben les amis , déconnez pas... il s'agit d'un problème de php/bdd, car le multiSelect fait bien son boulot jusqu’à preuve du contraire

**baddevil** · 01/05/2014, 12h03

bonjour, désolé mais plus rien fonctionne avec le code proposé

comme dit ascito c est surement le php car tout répond correctement a part le résultat sur le select 3

**danielhagnoul** · 01/05/2014, 19h52

La rédaction de vos transactions JSON au niveau de la transmission des paramètres et le libellé de vos $_GET[] sont pourtant très bizarres.

**baddevil** · 01/05/2014, 20h24

le code n est pas de moi je l ai recupéré http://ars69-techno.over-blog.com/20...dynamique.html, et étant débutant , que voulez vous dire par bizarre ???

**feecochette** · 02/05/2014, 13h25

Bonjour,

C'est une mauvaise conception SQL, ta table à l'air de ressembler à ça :

CAROSSERIE | MARQUE | MODELE

Hors lorsque tu affiche le modèle de ton véhicule dans ton script PHP tu effectue la requête suivante :

Code php :

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

$requete = "SELECT DISTINCT(Modele) FROM autotran WHERE Marque = '".$_GET['Marque']."'";

Tu ne prend en compte que le critère Marque pour afficher les modèles et non le critère carrosserie.
Rajoute comme critères de sélection dans ta requête SQL la carrosserie, exemple :

Code php :

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

$requete = "SELECT DISTINCT(Modele) FROM autotran WHERE Marque = '".$_GET['Marque']."' AND Carrosserie= '".$_GET['carrosserie']."'";

Il faut bien sur adapter le reste du code....

**baddevil** · 02/05/2014, 17h47

la base se met a jour via un fichier texte et donc dans un ordre précis , j ai pas eu trop le choix... mais j avais essayé justement la requête avec le AND mais effectivement je pensai que cela aurai suffit, mais apparemment le fichier en js doit être également modifier ,mais je ne sais pas comment en faite

**baddevil** · 03/05/2014, 12h26

bonjour,
quelqu'un saurait il ce que je doit modifier dans mon fichier JS pour exécuter la requête

Code php :

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

$requete = "SELECT DISTINCT(Modele) FROM autotran WHERE Marque = '".$_GET['Marque']."' AND Carrosserie= '".$_GET['carrosserie']."'";

en vous remerciant d avance

**baddevil** · 04/05/2014, 20h47

bonsoir,
une aide serai le bien venu , s il vous plait

**baddevil** · 11/05/2014, 20h50

toujours bloqué a mon soucis , y a vraiment personne pour m aider ???

**almoha** · 13/05/2014, 13h50

Bonjour,

Il faut ajouter le paramètre "carrosserie" dans ta requête ajax lors de l'évènement change du 2ème select. Tu récupères la valeur de ce paramètre en te basant sur l'option sélectionnée du <select id="carosserie">

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$Marque.on('change', function() {
	var marque = $(this).val(); // on récupère la valeur de la marque
        var carosserie = $('#carosserie option:selected').val()// on récupère la valeur de la carrosserie
	if(val != '') {
		$Modele.empty(); // on vide la liste de localité trois
		$Modele.append('<option value="">Modele</option>');
		$.ajax({
			url: 'liste.php',
                        data: { Marque: marque, Carosserie: carosserie },//paramètres passés dans la requête ajax
			dataType: 'json',
			success: function(json) { //...suite du traitement

Ensuite comme le dit feecochette, tu dois adapter ta requête SQL dans ton fichier php.

**baddevil** · 13/05/2014, 18h45

bonjour almoha, et merci pour ta réponse et ton aide, j ai essayé ton code et pourtant mon fichier php est modifié par la requête qu' avait soumis feecochette, j avais d'ailleur au par avant écrit la même pensant que ca venait de la, mais avec ton code ajax mon dernier select (modèle) ne fonctionne pas

**almoha** · 13/05/2014, 22h51

Peux-tu mettre en ligne ton essai non fonctionnel effectué à partir de ma proposition de code ? Peux-tu poster par ailleurs la dernière version de ton code php ?

**baddevil** · 14/05/2014, 18h47

bonjour,

alors voici le lien en ligne http://www.creaweb68.fr/CW/autotran/liste_dynamique/

voici le nouveau code 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
71
72
 
// JavaScript Document
$(document).ready(function() {
	var $Carosserie = $('#Carosserie');
	var $Marque = $('#Marque');
	var $Modele = $('#Modele');
 
	// 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
				$('#Carosserie').append('<option value="'+ index +'">'+ value +'</option>');
			});
		}
	});
 
	// à la sélection de la localité un dans la liste
	$Carosserie.on('change', function() {
		var val = $(this).val(); // on récupère la valeur de la localité un
		if(val != '') {
			$Marque.empty(); // on vide la liste de localité deux
			$Marque.append('<option value="">Marque</option>');
 
			$.ajax({
				url: 'liste.php',
				data: 'Carosserie='+ val, // on envoie $_GET['localite_un']
				dataType: 'json',
				success: function(json) {
					$.each(json, function(index, value) {
						$Marque.append('<option value="'+ index +'">'+ value +'</option>');
					});
				}
			});
		}
		else {
			$Marque.empty();
			$Marque.append('<option value="">Marque</option>');
			$Modele.empty(); // on vide la liste de localité deux
			$Modele.append('<option value="">Modele</option>');
		}
	});
 
	// à la sélection de la localité deux dans la liste
	$Marque.on('change', function() {
		var val = $(this).val(); // on récupère la valeur de la localité deux
    var carosserie = $('#Carosserie option:selected').val();// 
		if(val != '') {
			$Modele.empty(); // on vide la liste de localité trois
			$Modele.append('<option value="">Modele</option>');
 
			$.ajax({
				url: 'liste.php',
				data: { Marque: marque, Carosserie: carosserie },// // on envoie $_GET['localite_deux']
				dataType: 'json',
				success: function(json) {
					$.each(json, function(index, value) {
						$Modele.append('<option value="'+ index +'">'+ value +'</option>');
					});
				}
			});
		}
		else {
			$Modele.empty();
			$Modele.append('<option value="">Modele</option>');
		}
	});
});

et mon fichier php

Code php :

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
 
<?php
 
// Vérification des paramètres d'accès au fichier liste.php
if(isset($_GET['go']) || isset($_GET['Carosserie']) || isset($_GET['Marque'])) {
	// connexion à la base de données
	try {
		$bdd = new PDO('mysql:host=*********;dbname=*********', '******', '********');
	} 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 DISTINCT(Carosserie) FROM autotran ";
		// 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["Carosserie"]][] = utf8_encode($donnees["Carosserie"]);
		}
	}
	elseif(isset($_GET['Carosserie'])) {
		// requête qui récupère les localités un
		$requete = "SELECT DISTINCT(Marque) FROM autotran WHERE Carosserie = '".$_GET['Carosserie']."' ";
		// 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["Marque"]][] = utf8_encode($donnees["Marque"]);
		}
	}
	elseif(isset($_GET['Marque'])) {
		// requête qui récupère les localités un
		$requete = "SELECT DISTINCT(Modele) FROM autotran WHERE Marque = '".$_GET['Marque']."' AND Carosserie = '".$_GET['Carosserie']."'";
		// 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["Modele"]][] = utf8_encode($donnees["Modele"]);
		}
	}
	 // envoi du résultat au success
	echo json_encode($json);
}
 
?>

**almoha** · 14/05/2014, 21h23

Dans ton code, après

Code :

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

1
2
 
$Marque.on('change', function() {

remplace

Code :

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

1
2
 
var val = $(this).val();

par

Code :

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

1
2
 
var marque = $(this).val();

**baddevil** · 14/05/2014, 22h16

alors j ai remplacé ce que tu m as dit, cependant j avais une erreur avec firebug avec le if(val != '') { j ai remplacé le val par Marque mais maintenant tu peux voir en ligne que le resultat du select modele m indique pas des modèles mais encore des marques, dans firebug la requête semble bonne

**almoha** · 14/05/2014, 23h16

C'est donc ton fichier php qui pose problème (au niveau des conditions). Affiche ta requête en ajoutant :

Code php :

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

1
2
 
echo $requete;

avant

Code php :

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

1
2
3
 
 // envoi du résultat au success
echo json_encode($json);

tu verras que ta requête ne convient pas. Une fois la modification faite, enlève le "echo $requete";

3 listes liées [AJAX]

jQuery

Discussions similaires

Partager

Partager