Probleme d'affichage d'une liste deroulante dependante
aichatou
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour, j'ai besoin de votre aide. J'ai deux listes déroulantes dépendantes grade et echelon. Des qu'on clique sur grade rien ne s'affiche dans echelon. Voici mon code
<?php
include('config/cn.php');
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script-->
<script src="js/script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="col-md-2">
<label for="grade" class="required">Grade :</label>
<select onChange="getEchelon(this.value);" name="grade" id="grade" class="form-control">
<option value="">Choisir le grade</option>
<?php $re=$cn->query('select * from grade');
while ($tabRe=$re->fetch()) { ?>
<option value="<php echo $tabRe['id_grade']; ?>">
<?php echo $tabRe['nom_grade'];?>
</option>
<?php }
?>
</select>
</div>   
<!--...................................echelon....................-->
<div class="col-md-2">
<label for="echelon">Echelon :</label>
<select class="form-control" name="echelon" id="echelon-list">
<option value="">select</option>
</select>
</div>
<div class="align-self-end ml-auto">
<button type="submit" class="btn btn-info"><i class="fa fa-check"></i>
Enregistrer
</button>
</div>
<!-- Bootstrap 4 --><!--script permettant d'ajouter des button avec leur position-->
<!--script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script-->
<!--script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script-->
<!--ajax-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--bootstrap5-->
<!--script src=" https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js "></script-->
</body>
</html>
Voici le fichier getEchelon.php
<?php
include('config/cn.php');
if (!empty($_POST['id_grade'])) {
$re=$cn->prepare('SELECT nom_echelon from echelon where id_grade=?');
$re->execute([$_POST['id_grade']]);
$tabRe = $re->fetch();
?>
<option value="">select echelon</option>
<?php
while($tabRe = $re->fetch())
{
?>
<option value="<?php echo $tabRe['id_echelon'];?>"><?php echo $tabRe['nom_echelon'];?></option>
<?php
}
}?>
Voici le fichier script.js
function getEchelon(val){
$.ajax({
type:"POST",
url:"getEchelon.php",
data:'id_grade='+val,
success:function(data){
$("#echelon-list").html(data);
}
})
}
//function getEchelon(val){
//$.ajax({
//type:"POST",
//url:"getEchelon.php",
//data:'id_classe='+val,
//success:function(data){
//$("#echelon-list").html(data);
//}
//})
//}
Windows / Firefox 126.0
A voir également:
- Probleme d'affichage d'une liste deroulante dependante
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Liste déroulante google sheet - Accueil - Guide bureautique
- Liste code ascii - Guide
- Affichage double ecran - Guide
1 réponse
Bonjour,
Il y aurait quelques "améliorations" à apporter à ton code ...
Mais commence déjà par ça pour identifier le souci :
=> voir le chapitre : Débuggage de l'ajax
Pense aussi à appliquer ceci par rapport à PDO :
https://forums.commentcamarche.net/forum/affich-37584941-php-pdo-gerer-les-erreurs
Reviens nous voir ensuite avec des captures écrans des tes appels ajax dans la console...