Sujet Précédent Sujet Suivant

Probleme d'affichage d'une liste deroulante dependante

aichatou - 14 juin 2024 à 18:01
jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 - 14 juin 2024 à 21:11

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>&emsp;&emsp;&emsp;

<!--...................................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
Google sheet liste déroulante - Accueil - Guide bureautique
Supprimer liste déroulante excel - Forum Excel
Adèle consulte son compte sur le site de sa banque et obtient l'affichage ci-dessous. complétez le texte. - Forum Facebook

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 4 739
14 juin 2024 à 21:11

Bonjour,

Il y aurait quelques "améliorations" à apporter à ton code ...

Mais commence déjà par ça pour identifier le souci :

https://forums.commentcamarche.net/forum/affich-37772066-php-jquery-debugage-ajax?v8th5MQcMDx5M3B0rKm5-neTZwY_nmCtrBX4svMXzV8*

=> 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...

Discussions similaires

Suppression listes déroulantes

Supprimer liste déroulante Excel

Effacer le contenue d'une cellule avec liste déroulante

supprimer une liste déroulante

Effacer liste déroulante

Votre réponse

Discussions similaires