Sujet Précédent Sujet Suivant

Probleme d'affichage d'une liste deroulante dependante

aichatou - 14 juin 2024 à 18:01
jordane45 Messages postés 38299 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 novembre 2024 - 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
Adèle consulte son compte sur le site de sa banque et obtient l'affichage ci-dessous. complétez le texte. - Forum Facebook
Le fichier contient une liste de prénoms. triez ce tableau par ordre alphabétique des prénoms. quel mot est formé par les 6 premières lettres de la colonne code ? - Forum Bureautique

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38299 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 novembre 2024 4 704
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