Faire des SELECT dépendants
Bonjour, je sollicite votre aide car j'essaie de lier mes deux SELECT quartier et sousquartier. Je n'arrive pas à voir le problème, rien ne s'affiche dans la console.
C'est toujours les sousquartiers du 1er quartier qui s'affichent
Ma table quartiers est de la forme suivante:
| id |
id_parent |
quartier_fr |
quartier_en |
|---|
| 1 |
0 |
quartier1 |
quartier1 |
| 2 |
0 |
quartier2 |
quartier2 |
| 3 |
0 |
quartier3 |
quartier3 |
| 4 |
0 |
quartier4 |
quartier4 |
| ... |
|
|
|
| 101 |
1 |
sous-quartier1 |
sous-quartier1 |
| 102 |
1 |
sous-quartier2 |
sous-quartier2 |
| ... |
|
|
|
| 201 |
2 |
sous-quartier4 |
sous-quartier4 |
| 202 |
2 |
sous-quartier5 |
sous-quartier5 |
| ... |
|
|
|
Voici le code dans la page formannonce.php (se trouvant dans le dossier principales):
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
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
73
74
| <head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script src='/jquery-3.6.0.js'> </script>
<script>
$(document).ready(function(){
$('#quartier').on('change',function(){
var quartierID= $(this).val();
if(quartierID){
$.getJSON("/principales/ajax.php",{quartier:quartierID}, function(result){
console.log('reponse ajax',result);
$.each(result, function(i, el){
$("#sousquartier").append("<option value='"+el.id+"'>"+el.qua+"</option>");
}); // ferme le each
}); // ferme le getJson
} // ferme le if
}); // ferme le on change
});
</script>
//...suite
//Pour les select:
<div id= "c">
<span><label for="quartier"><?php echo $lang['quartier'];?></label></span> <br>
<select id="quartier" onchange="choisirsous()" name="quartier">
<option value="" disabled selected><?php echo $lang['quartier'];?></option>
<?php
// 1- on récupère les quartiers principaux
$quartiers = getQuartier( 0 );
$sousquartiers = getQuartier( $quartiers[0]['id'] );
if($quartiers){
foreach($quartiers as $quart){
echo "<option value='".$quart['id']."'>".$quart['qua']."</option>";
}
?>
</select>
<br> <br>
</div>
<div id="d">
<span><label for="sousquartier"><?php echo $lang['quartier'];?>2</label></span> <br>
<select id= "sousquartier" name="sousquartier">
<option value="" disabled selected><?php echo $lang['quartier'];?></option>
<?php
foreach($sousquartiers as $sq){
echo "<option value='".$sq['id']."'>".$sq['qua']."</option>";
}
}//fin accolade if $quartiers
?>
</select>
</div> |
Et d'autre part la page ajax.php dans le dossier principales:
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
| <?php
include "../cnx.php";
function getQuartier( $id_parent=0 )
{
global $bdd;
$sql_lang = (!empty(($_SESSION['lang']) && in_array($_SESSION['lang'], ['fr','en']) ))? $_SESSION['lang'] : 'fr'; // on s'assure que la langue est correcte
$sql = "SELECT id, id_parent, quartier_".$sql_lang." AS qua
FROM quartiers
WHERE id_parent = :id_parent
ORDER BY id
";
try{
$req = $bdd->prepare($sql);
$req->execute( array(':id_parent'=>$id_parent) );
$res = $req->fetchAll(PDO::FETCH_ASSOC);
}catch(Exception $e){
echo "Erreur dans la requête " . $sql;
$res = false;
}
return $res;
}
$q = !empty($_GET['quartier']) ? $_GET['quartier'] : NULL;
if(isset($q)){
$sousquartiers = getQuartier( $q);
echo json_encode( $sousquartiers ) ;
exit;
}
?> |
Le fichier jquery-3.6.0 est dans aucun dossier, c'est pourquoi j'ai mis un / dans <script src=
Auriez-vous une solution?
