Bonjour tous, jai urgement besoin d'aide. jai réussi à lier deux listes mais je bloque sur la troisième...elle ne marche pas,quelqu'un aurait une astuce.

Liste déroulantes liées [Résolu]

Réponse 1 / 6

jordane45 Messages postés 38417 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 février 2025 4 734
7 nov. 2018 à 14:04

Bonjour,

Sans montrer ton code... impossible de te répondre.
Pense également à regarder dans la console de ton navigateur si il n'y aurait pas des erreurs javascript.

NB: Pour poster du code sur le forum, merci de le faire en utilisant LES BALISES DE CODE (et en y précisant le langage)
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Réponse 2 / 6

Dologes1 Messages postés 19 Date d'inscription mercredi 7 novembre 2018 Statut Membre Dernière intervention 17 novembre 2018
7 nov. 2018 à 16:47

<div class="form-group">
    <label class="control-label col-md-2" for="idap">Application:</label>
    <div class="col-md-3"> 
      <select name="idap" class="form-control" id='application' onchange='go()'>
          <option value='-1'>Aucun</option>
    <?php 
$donnee=$connect->query("SELECT * FROM application");
while($e=$donnee->fetch(PDO::FETCH_ASSOC)){
echo '<option value="'.$e['idap'].'" >'.$e['libap'].'</option>';
}$data->closeCursor();

?> </select></div>  
                  
     <div class="form-group" id="profil">
    <label class="control-label col-md-3" for="idpro">Profil:</label>
  
    <div class="col-md-3"> 
      <select name="profil" class="form-control col-md-3">
             <option value='-1'>Choisir un libellé</option>
    </select></div></div>
                
        </div>

Réponse 3 / 6

Dologes1 Messages postés 19 Date d'inscription mercredi 7 novembre 2018 Statut Membre Dernière intervention 17 novembre 2018
7 nov. 2018 à 16:49

<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   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 les options a la liste
						document.getElementById('profil').innerHTML = leselect;
                                                
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","script.php",true);
    		                 // 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'application
				sel = document.getElementById('application');
				idap = sel.options[sel.selectedIndex].value;
				xhr.send("idap="+idap);
                                
			}
                        
                       
                     
                            
		</script>

Réponse 4 / 6

Dologes1 Messages postés 19 Date d'inscription mercredi 7 novembre 2018 Statut Membre Dernière intervention 17 novembre 2018
7 nov. 2018 à 16:51

JE CROIS QUE CEST BON MAINTENANT,jai bien vu...donc je me reprends: "je veux apres avoir fait un select sur la liste liée afficher en temps réel ce que jai selectionné

jordane45 Messages postés 38417 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 février 2025 4 734
7 nov. 2018 à 17:14

Donc,
Si je comprend bien ...

Lorsque tu choisis une valeur dans la liste

<select name="profil" class="form-control col-md-3">

Tu veux que la donnée selectionnée s'affiche....

Mais... s'affiche où ?

Et puis.. qu'as tu essayé ? Sur quoi bloques tu ?

Au cas où tu ne saurais pas par quoi commencer...
- Mettre un ID à ta liste
- Mettre un ID à l'élément dans lequel tu afficher l'information
- Utiliser le "onchange" pour détécter le changement de valeur de ta liste déroulante
- Utiliser le

 document.getElementById

pour cibler tes éléments html.

Dologes1 Messages postés 19 Date d'inscription mercredi 7 novembre 2018 Statut Membre Dernière intervention 17 novembre 2018
9 nov. 2018 à 15:03

Je voudrais qu'elle s'affiche ici:

                              <div class="form-group" id="dpro">
    <label class="control-label col-md-3" for="dpro">Profil:</label>
 
    <div class="col-md-3"> 
      <select name="dpro" class="form-control col-md-3" >
             <option value='-1'>Afficher le libellé</option>
    </select></div></div>

Dologes1 Messages postés 19 Date d'inscription mercredi 7 novembre 2018 Statut Membre Dernière intervention 17 novembre 2018
9 nov. 2018 à 20:22

Merci de te pencher sur mon cas,jespère avoir la possibilité ainsi daider plusieurs autres à mon tour

jordane45 Messages postés 38417 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 février 2025 4 734 > Dologes1 Messages postés 19 Date d'inscription mercredi 7 novembre 2018 Statut Membre Dernière intervention 17 novembre 2018
10 nov. 2018 à 07:37

As tu lu mes autres remarques/consignes/questions ?

Dologes1 Messages postés 19 Date d'inscription mercredi 7 novembre 2018 Statut Membre Dernière intervention 17 novembre 2018
11 nov. 2018 à 13:32

Oui jai bien lu,il ya quelques choses qui ne vas pas ??

                              <div class="form-group" id="dpro">
    <label class="control-label col-md-3" for="dpro">Profil:</label>
 
    <div class="col-md-3"> 
      <select name="dpro" class="form-control col-md-3" id="idpro">
             <option value='-1'>Afficher le libellé</option>
    </select></div></div>

Mais xa ne reagit toujours pas. Je remet le script:

<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function goo(){
				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 les options a la liste
						document.getElementById('idpro').innerHTML = leselect;
                                                
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","script.php",true);
    		                 // 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'application
				sel = document.getElementById('profil');
				idpro = sel.options[sel.selectedIndex].value;
				xhr.send("idpro="+idpro);
                                
			}
                        
                       
                     
                            
		</script>

et là où jappelle la fonction:

<div class="form-group" id="profil">
    <label class="control-label col-md-3" for="idpro">Profil:</label>
  
    <div class="col-md-3"> 
      <select name="profil" class="form-control col-md-3" onchange='goo()'>
             <option value='-1'>Choisir un libellé</option>
    </select></div></div>

Et je me dis qu'en selectionant le profil je pourrai appeler la fonction qui elle me trouver le libellé a afficher jignore si je suis clair ou pas...

Réponse 5 / 6

jordane45 Messages postés 38417 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 février 2025 4 734
11 nov. 2018 à 19:57

Je vais essayer de reformuler de façon à ce que tu comprennes et que tu prennes correctement en compte les consignes que je te donne.
Donc.....

Tu as ta liste

 <select name="profil" class="form-control col-md-3" onchange='goo()'>

Qui lance la fonction goo()

Cette fonction goo() .. lorsqu'elle réussi à appeller le script PHP (en ajax) lance l'exécution du code

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 les options a la liste
						document.getElementById('idpro').innerHTML = leselect;
                                                
					}
				}

Dans ce code.. tu fais un

document.getElementById('idpro')

La première question à se poser est : as tu un élément dans ta page dont l' ID est "idpro" ?

Ensuite, la seconde vérification à faire lorsque l'on fait du javascript..c'est de s'assurer qu'il n'y a pas d'erreur affichée dans la CONSOLE du navigateur.
Encore plus lorsque l'on fait de l'ajax.... (et pour voir les appels et les réponses des scripts ajax, il faut :
- Sur firefox, dans la console, activer si ce n'est pas fait le "xhr"
- Sous Chrome, télécharger le plugin AJAX DEBUGER

Dologes1 Messages postés 19 Date d'inscription mercredi 7 novembre 2018 Statut Membre Dernière intervention 17 novembre 2018
Modifié le 14 nov. 2018 à 20:25

oui oui il ya bien idpro... est ce quil ya un moyen de vérifier le fonctionnement d'une fonction

jordane45 Messages postés 38417 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 février 2025 4 734
14 nov. 2018 à 20:04

Non.
Relis bien la réponse que je t'ai donné ...

Dologes1 Messages postés 19 Date d'inscription mercredi 7 novembre 2018 Statut Membre Dernière intervention 17 novembre 2018
14 nov. 2018 à 21:39

Je te fais un autre point, au fait je veux liée application et profil deux table: dans profil on a id,code et libellé, j’aimerais pour chaque application sélectionner le profil et afficher le libellé correspondant...sinon jai bien lu et relu je suis en train de revoir tout le code même

Dologes1 Messages postés 19 Date d'inscription mercredi 7 novembre 2018 Statut Membre Dernière intervention 17 novembre 2018
14 nov. 2018 à 21:40

Or les code profils sont afficher par JS, comment donc appeler une fonction de là!!!

Dologes1 Messages postés 19 Date d'inscription mercredi 7 novembre 2018 Statut Membre Dernière intervention 17 novembre 2018
Modifié le 14 nov. 2018 à 22:48

ce que je veux faire donc c'est:

<div class="form-group" id="profil">
    <label class="control-label col-md-3" for="idpro">Profil:</label>
 
    <div class="col-md-3"> 
      <select name="libpro" class="form-control col-md-3">
             <option value='-1'>Choisir un profil</option>
    </select></div></div>

cette liste se rempli bien,j'aimerais à partir remplir la 2e liste:

<div class="form-group" id="dpro">
    <label class="control-label col-md-3" for="dpro">Libellé Profil:</label>
 
    <div class="col-md-3"> 
      <select name="dpro" class="form-control col-md-3">
             <option value='-1'>Choisir un libellé</option>
    </select></div></div>


<div class="form-group" id="profil">
    <label class="control-label col-md-3" for="idpro">Profil:</label>
 
    <div class="col-md-3"> 
      <select name="libpro" class="form-control col-md-3" onchange="goo()">
             <option value='-1'>Choisir un profil</option>
    </select></div></div>

</code>

je veux donc remplir la deuxième liste en fonction de la première: c'est tout le problème qui est là.

pour cela jappelle une fonction goo():

Réponse 6 / 6

Dologes1 Messages postés 19 Date d'inscription mercredi 7 novembre 2018 Statut Membre Dernière intervention 17 novembre 2018
15 nov. 2018 à 12:12

toutes mes excuses je tenvoie tout mon code:
ici je selectionne une appli et j'ai les code profils a partir de la fonction go()

 <div class="form-group">
    <label class="control-label col-md-2" for="idap">Application:</label>
    <div class="col-md-3"> 
      <select name="idap" class="form-control" id='application' onchange='go()'>
          <option value='-1'>Aucun</option>
    <?php 
$data=$connect->query("SELECT * FROM application");
while($d=$data->fetch(PDO::FETCH_ASSOC)){
echo '<option value="'.$d['idap'].'" >'.$d['libap'].'</option>';
}$data->closeCursor();
?> </select></div>  
                  
     <div class="form-group" id="profil">
    <label class="control-label col-md-3" for="idpro">Profil:</label>
 
    <div class="col-md-3"> 
      <select name="idpro" class="form-control col-md-3" id='profil2' onchange='goo() >
             <option value='-1'>Choisir un profil</option>
    </select></div></div>
                
        </div>

quand on selectionne un code profil, je veux le libellé en question,jappelle donc la fonction goo()
et c'est ici que je veux l'affichage du code profil:

<div class="form-group" id="dpro">
    <label class="control-label col-md-3" for="dpro">Libellé du profil:</label>
 
    <div class="col-md-3"> 
      <select name="dpro" class="form-control col-md-3" >
             <option value='-1'>Choisir un profil</option>
    </select></div></div>

voilà mon script:

<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   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 les options a la liste
						document.getElementById('profil').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","script.php",true);
				// 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'application
				sel = document.getElementById('application');
				idap = sel.options[sel.selectedIndex].value;
				xhr.send("idap="+idap);
			}
	function goo(){
				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 les options a la liste
						document.getElementById('dpro').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","script2.php",true);
				// 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 du profil
				sel = document.getElementById('profil2');
				idpro = sel.options[sel.selectedIndex].value;
				xhr.send("idpro="+idpro);
			}
		</script>

le contenu de script.php:


<?php
include('base.php');
?>
  
<html>
    <head>
        <link rel="stylesheet" href="css/bootstrap/css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap/style.css"> 
    </head>
    <body>
     <form> 
         
              
    <div class="form-group" id="profil">
    <label class="control-label col-md-3" for="idpro">Profil:</label>
     <div class="col-md-3">
        
     <?php

	echo "<select name='idpro' class=form-control>";
	if(isset($_POST["idap"])){
		
     $data=$connect->query("SELECT idpro,libpro FROM profil 
			WHERE idap=".$_POST["idap"]." order by libpro");
                          while($a=$data->fetch(PDO::FETCH_ASSOC)){       
			echo "<option value='".$a["idpro"]."'>".$a["libpro"]."</option>";
		}
	}
	echo "</select>";
        
?>
 
   </div></div>
         
               

    </form>
    </body>

le contenu de script2.php


<?php
include('base.php');
?>
  
<html>
    <head>
        <link rel="stylesheet" href="css/bootstrap/css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap/style.css"> 
    </head>
    <body>
     <form> 
         
  <div class="form-group" id="dpro">
    <label class="control-label col-md-3" for="idpro">Profil:</label>
     <div class="col-md-3">
        
        
     <?php

	echo "<select name='dpro' class=form-control>";
	if(isset($_POST["idpro"])){
		
     $data=$connect->query("SELECT idpro FROM profil 
			WHERE idpro=".$_POST["idpro"]." order by dpro");
                          while($a=$data->fetch(PDO::FETCH_ASSOC)){       
			echo "<option value='".$a["dpro"]."'>".$a["dpro"]."</option>";
		}
	}
	echo "</select>";
        
?>
 
   </div></div>
         
               

    </form>
    </body>

table profil(idpro,libpro,dpro,idap)

jordane45 Messages postés 38417 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 février 2025 4 734
15 nov. 2018 à 12:41

Dans ton fichier script2.php
que viennent faire là les balises html

<html>
    <head>
        <link rel="stylesheet" href="css/bootstrap/css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap/style.css"> 
    </head>
    <body>
     <form> 
         
  <div class="form-group" id="dpro">
    <label class="control-label col-md-3" for="idpro">Profil:</label>
     <div class="col-md-3">

????

C$oté JS, peux tu modifié le code comme ceci et me dire ce que ça t'affiche à l'écran ET dans la console ?

function goo(){
  alert('la fonction goo est lancée...');
  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
    console.log('ajax goo()',xhr.status);
    if(xhr.readyState == 4 && xhr.status == 200){
      leselect = xhr.responseText;
      alert('reponse dans la fonction goo' + leselect);
      // On se sert de innerHTML pour rajouter les options a la liste
      document.getElementById('dpro').innerHTML = leselect;
    }
  }

  // Ici on va voir comment faire du post
  xhr.open("POST","script2.php",true);
  // 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 du profil
  sel = document.getElementById('profil2');
  idpro = sel.options[sel.selectedIndex].value;
  xhr.send("idpro="+idpro);
}

Dologes1 Messages postés 19 Date d'inscription mercredi 7 novembre 2018 Statut Membre Dernière intervention 17 novembre 2018
15 nov. 2018 à 13:00

les balises html nont pas de rôles, je les utilise pour que le champ généré par js s'aligne au même endroit que celui du code sur la page

jordane45 Messages postés 38417 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 février 2025 4 734
15 nov. 2018 à 13:20

Toi tu n as pas compris comment s'utilise l'ajax...

Dologes1 Messages postés 19 Date d'inscription mercredi 7 novembre 2018 Statut Membre Dernière intervention 17 novembre 2018
16 nov. 2018 à 11:46

Peut être que cest cela mon souci...mais quand jai lancé la fonction la premiere fois,xa a marché mais il y avait un decallage au niveau de la page,avec ces balise html là je regle le probleme,sinon ya pas d'utilité en tant que telle...je compile pour ce que tu mas proposé et je te reviens

Dologes1 Messages postés 19 Date d'inscription mercredi 7 novembre 2018 Statut Membre Dernière intervention 17 novembre 2018
16 nov. 2018 à 15:07

BonjourJordy, jai essayé xa ne marche toujours pas...xa ne reagit même pas

Liste déroulantes liées

6 réponses

Discussions similaires