Remplir une liste déroulante selon une autre liste (ajax, jquery

rawiaGL Messages postés 23 Statut Membre -
supupoff Messages postés 350 Statut Membre - 4 mai 2015 à 10:28

Bonjour,

alors j'essaye de faire fonctionner mon code ajax suivant mais Hélas ..rien ne marche any help plz ?
Client.html

<html>
<style>
	.select
	{
		width:14%;
		border: 2px solid gray;
		margin-left:15px;
		
	}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.js"></script>

						<p>Projet</p>
						<select id="liste_projet" class="select" name="id_projet" >
							<option value="">-- Projets --</option>
						</select>
						<p>Profil</p>
						<select id="liste_profil" class="select"  name="id_profil" >
							<option value="">-- Profils --</option>
						</select>	


</html>

Jquery.js


<script>
		$(document).ready(function() {
    var $liste_projet = $('#liste_projet');
    var $liste_profil = $('#liste_profil');
     
    // chargement des régions
    $.ajax({
        url: 'projet_profil.php',
		type: 'GET',
        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
                $liste_projet.append('<option value="'+ index +'">'+ value +'</option>');
            });
        }
    });
 
    // à la sélection d une région dans la liste
    $liste_projet.on('change', function() {
        var val = $(this).val(); // on récupère la valeur du projet
 
        if(val != '') {
            $liste_profil.empty(); // on vide la liste des départements
             
            $.ajax({
                url: 'projet_profil.php',
                data: 'id_projet='+ val, // on envoie $_GET['id_projet']
				type: 'GET',
			   dataType: 'json',
                success: function(json) {
                    $.each(json, function(index, value) {
                        $liste_profil.append('<option value="'+ index +'">'+ value +'</option>');
                    });
                }
            });
        }
    });
});
</script>

projet_profil.php

<?php
if(isset($_GET['go']) || isset($_GET['id_projet'])) {
 
    $json = array();
     
    if(isset($_GET['go'])) {
        // requête qui récupère les régions
        $requete = "SELECT id_projet, nom_projet FROM projet";
    } else if(isset($_GET['id_projet'])) {
        $id = htmlentities(intval($_GET['id_projet']));
        // requête qui récupère les départements selon la région
        $requete = "SELECT pp.id_profil, libele_profil FROM profil_fact pf,profil_projet pp
					WHERE pp.id_projet = ". $id ."
					AND pf.id_profil=pp.id_profil
					";
    }
     
    // connexion à la base de données
    try {
        $bdd = new PDO('mysql:host=127.0.0.1;dbname=neolians_rh', 'root', '');
    } catch(Exception $e) {
        exit('Impossible de se connecter à la base de données.');
    }
    // exécution de la requête
    $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
     
    // résultats
    while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) {
   // je remplis un tableau et mettant l'id en index (que ce soit pour les régions ou les départements)
    $json[$donnees['id_projet']][] = utf8_encode($donnees['nom_projet']);
	 $json[$donnees['id_profil']][] = utf8_encode($donnees['libele_profil']);
    }
     
    // envoi du résultat au success
    echo json_encode($json);
}
?>

aucun message d'erreur ne s'affiche ..et les listes déroulantes restent toujours vides ..j'ai pas compris où est le problème

Afficher la suite

A voir également:

Remplir une liste déroulante selon une autre liste (ajax, jquery
Liste déroulante excel - Guide
Liste déroulante en cascade - Guide
Liste code ascii - Guide
Site dangereux liste - Guide
Liste déroulante google sheet - Accueil - Guide bureautique

1 réponse

Réponse 1 / 1

supupoff Messages postés 350 Statut Membre 34

voila une travail bâclé et non testé essayé le j'espère qu'il fonctionne

NB ; J'ai rien changé dans fichier projet_profil.php et pas besoin de fichier Jquery.js

Client.html

<html>
<head>
<script type='text/javascript'>
    
            function getXhr(){
           
                                var xhr = null;
                                  if (window.XMLHttpRequest)  // Mozilla, Safari,...
                                 xhr = new XMLHttpRequest();

                 else if(window.ActiveXObject){ // Internet Explorer
                   try {   
                
                          xhr = new ActiveXObject("Microsoft.XMLHTTP");
                           
                   
                        } catch (e) {
                            xhr = new ActiveXObject("Microsoft.XMLHTTP");
                           
                        }
                }
                else { // XMLHttpRequest non supporté par le navigateur
                  
                   xhr = false;
                  
                }
                                return xhr;        
                               
            }
           
            /**
            * Méthode qui sera appelée sur le click du bouton
            */
            function go(){
       
        var xhr = getXhr();

                // On défini ce qu'on va faire quand on aura la réponse
                xhr.onreadystatechange = function(){
                    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                if (xhr.readyState == 4 &&    xhr.status == 200) {
                        leselect = xhr.responseText;
                        // On se sert de innerHTML pour rajouter le valeur au liste_profil
                        document.getElementById("liste_profil").innerHTML = leselect;  //
                        }
                }
        // Ici on va voir comment faire du post
                xhr.open("GET","projet_profil.php",true); // <== Post methode d'envoie et projet_profil.php fichier d'action -- je prefère post --
                // ne pas oublier ça pour le post
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                // ne pas oublier de poster les arguments
                // ici, l'id de l'auteur
                sel = document.getElementById('liste_projet');  // <==  ici  Projet selectioner
                mat= sel.value;   // <== prendre le valeur de variable liste_projet
               
                xhr.send("id_projet="+mat);  // <== id_projet envoyer
           
            }
            </script>
</head>
<style>
 .select
 {
  width:14%;
  border: 2px solid gray;
  margin-left:15px;
  
 }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>


      <p>Projet</p>
      <select id="liste_projet" class="select" name="id_projet" >
       <option value="">-- Projets --</option>
      </select>
      <p>Profil</p>
      <select id="liste_profil" class="select"  name="id_profil" >
       <option value="">-- Profils --</option>
      </select> 


</html>

La chance aide parfois, le travail toujours.

Discussions similaires

Suppression listes déroulantes

Supprimer liste déroulante Excel

Votre réponse

Discussions similaires