Menu

Liste déroulantes liées

Messages postés
19
Date d'inscription
mercredi 7 novembre 2018
Dernière intervention
17 novembre 2018
- 7 nov. 2018 à 13:28 - Dernière réponse :
Messages postés
19
Date d'inscription
mercredi 7 novembre 2018
Dernière intervention
17 novembre 2018
- 17 nov. 2018 à 01:07
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.
Afficher la suite 

Votre réponse

27 réponses

Messages postés
23255
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 novembre 2018
- 7 nov. 2018 à 14:04
0
Merci
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


Commenter la réponse de jordane45
Messages postés
19
Date d'inscription
mercredi 7 novembre 2018
Dernière intervention
17 novembre 2018
- 7 nov. 2018 à 16:47
0
Merci
<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>       
Commenter la réponse de Dologes1
Messages postés
19
Date d'inscription
mercredi 7 novembre 2018
Dernière intervention
17 novembre 2018
- 7 nov. 2018 à 16:49
0
Merci
<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>
                
Commenter la réponse de Dologes1
Messages postés
19
Date d'inscription
mercredi 7 novembre 2018
Dernière intervention
17 novembre 2018
- 7 nov. 2018 à 16:51
0
Merci
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é
Messages postés
23255
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 novembre 2018
- 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.
Messages postés
19
Date d'inscription
mercredi 7 novembre 2018
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>
Messages postés
19
Date d'inscription
mercredi 7 novembre 2018
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
Messages postés
23255
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 novembre 2018
>
Messages postés
19
Date d'inscription
mercredi 7 novembre 2018
Dernière intervention
17 novembre 2018
- 10 nov. 2018 à 07:37
As tu lu mes autres remarques/consignes/questions ?
Messages postés
19
Date d'inscription
mercredi 7 novembre 2018
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...
Commenter la réponse de Dologes1
Messages postés
23255
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 novembre 2018
- 11 nov. 2018 à 19:57
0
Merci
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




Messages postés
19
Date d'inscription
mercredi 7 novembre 2018
Dernière intervention
17 novembre 2018
- 14 nov. 2018 à 21:49
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():
Messages postés
23255
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 novembre 2018
- 14 nov. 2018 à 22:51
Je ne peux pas être beaucoup plus clair que ce que je t'ai déjà indiqué :

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

Ensuite, pour t'assurer que tu entres bien dans ta fonction... il suffit d'y placer des console.log et de voir si ils s'affichent dans la console de ton navigateur...

De plus... sans avoir un aperçu COMPLET de ton code (histoire de voir où se trouvent les différents morceaux de ton code... il me sera difficile de t'aider d'avantage.... car bon.. tu me dis qu'il y a bien un élément html dont l'id est idpro... mais je ne le vois dans AUCUN des codes que tu nous donnes.
Messages postés
19
Date d'inscription
mercredi 7 novembre 2018
Dernière intervention
17 novembre 2018
- 15 nov. 2018 à 09:50
oui jai changé l'id en dpro,puisque l'autre l'utilise dejà!
Messages postés
23255
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 novembre 2018
>
Messages postés
19
Date d'inscription
mercredi 7 novembre 2018
Dernière intervention
17 novembre 2018
- 15 nov. 2018 à 09:57
Grrrr..... Vas tu te décider à prendre en compte TOUTES les remarques / questions que l'on te pose ?
Je t'ai demandé d'avoir ton code COMPLET..... sinon IMPOSSIBLE de t'aider !
Messages postés
19
Date d'inscription
mercredi 7 novembre 2018
Dernière intervention
17 novembre 2018
- 15 nov. 2018 à 12:20
Désolé pour les autres fois,je crois que cette fois tout y est! Encore Merci
Commenter la réponse de jordane45
Messages postés
19
Date d'inscription
mercredi 7 novembre 2018
Dernière intervention
17 novembre 2018
- 15 nov. 2018 à 12:12
0
Merci
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)
Messages postés
23255
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 novembre 2018
- 15 nov. 2018 à 13:20
Toi tu n as pas compris comment s'utilise l'ajax...
Messages postés
19
Date d'inscription
mercredi 7 novembre 2018
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
Messages postés
19
Date d'inscription
mercredi 7 novembre 2018
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
Messages postés
19
Date d'inscription
mercredi 7 novembre 2018
Dernière intervention
17 novembre 2018
- 17 nov. 2018 à 00:35
Bonsoir apres quelques retouche du code,jai cette erreur dans la console:

hab.php:134 Uncaught TypeError: Cannot read property 'undefined' of undefined
at goo (hab.php:134)
at HTMLSelectElement.onchange (hab.php:1)
Messages postés
19
Date d'inscription
mercredi 7 novembre 2018
Dernière intervention
17 novembre 2018
- 17 nov. 2018 à 01:07
Après un bon moment de galère,oouuuff c'est fini je peux a présent aider les aider, ouf quel soulagement...
Commenter la réponse de Dologes1