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

Fermé

rawiaGL Messages postés 18 Date d'inscription samedi 11 mai 2013 Statut Membre Dernière intervention 2 mai 2015 - 2 mai 2015 à 18:30
supupoff Messages postés 312 Date d'inscription dimanche 27 novembre 2011 Statut Membre Dernière intervention 8 janvier 2021 - 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

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
Google sheet liste déroulante - Accueil - Guide bureautique
Trouver numéro liste rouge gratuitement ✓ - Forum Mobile
Supprimer liste déroulante excel - Forum Réseaux sociaux

1 réponse

Réponse 1 / 1

supupoff Messages postés 312 Date d'inscription dimanche 27 novembre 2011 Statut Membre Dernière intervention 8 janvier 2021 34
Modifié par supupoff le 4/05/2015 à 10:29

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

SITES MARCHANDS NON SECURISES

Suppression listes déroulantes

Supprimer liste déroulante Excel

supprimer une liste déroulante

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