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

Réponse 1 / 6

jordane45 Messages postés 38480 Date d'inscription Statut Modérateur Dernière intervention 4 746

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 Statut Membre Dernière intervention

<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 Statut Membre Dernière intervention

<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 Statut Membre Dernière intervention

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 38480 Date d'inscription Statut Modérateur Dernière intervention 4 746

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 Statut Membre Dernière intervention

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 Statut Membre Dernière intervention

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

jordane45 Messages postés 38480 Date d'inscription Statut Modérateur Dernière intervention 4 746 > Dologes1 Messages postés 19 Date d'inscription Statut Membre Dernière intervention

As tu lu mes autres remarques/consignes/questions ?

Dologes1 Messages postés 19 Date d'inscription Statut Membre Dernière intervention

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 38480 Date d'inscription Statut Modérateur Dernière intervention 4 746

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 Statut Membre Dernière intervention

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

jordane45 Messages postés 38480 Date d'inscription Statut Modérateur Dernière intervention 4 746

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

Dologes1 Messages postés 19 Date d'inscription Statut Membre Dernière intervention

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 Statut Membre Dernière intervention

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

Dologes1 Messages postés 19 Date d'inscription Statut Membre Dernière intervention

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 Statut Membre Dernière intervention

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 38480 Date d'inscription Statut Modérateur Dernière intervention 4 746

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 Statut Membre Dernière intervention

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 38480 Date d'inscription Statut Modérateur Dernière intervention 4 746

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

Dologes1 Messages postés 19 Date d'inscription Statut Membre Dernière intervention

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 Statut Membre Dernière intervention

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

Liste déroulantes liées

6 réponses

Votre réponse

Discussions similaires