Combobox dependants des uns et des autres

Résolu
mousc -  
974_Vin's_974 Messages postés 547 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour Tout le monde,
Excusez-moi du dérangement, mais depuis quelques jours, j'ai eu des soucis avec la conception d'une page web.
Ma page contient un formulaire dans lequel il y a 3 combobox, chacun devant afficher le contenu d'un champ d'une table de la base de donnée mais en même temps reliés entre eux.
C'est à dire en clair, en sélectionnant une valeur du premier combobox (se trouvant dans une table), le second affiche une liste de valeur dont les données sont liées au premier, et après avoir choisi également une valeur dans ce 2èm combobox, le troisième combobox aussi affiche une liste de valeurs dépendantes du 2èm combobox.
Je suis parvenu à relier les 2 premiers combobox, en créant une fonction javascript qui permet de relier le 1èr au second, mais j'arrive pas à faire de même pour le 3èm en créant une seconde fonction qui permettrait de relier les valeurs du 3èm au second.
Si quelqu'un a une idée, ça m'aiderait énormement. Si ça vous aiderait de voir mieux clair, je pourrai vous montrer le contenu de mon formulaire et de mes 3 tables.

Je vous remercie d'avance.

9 réponses

974_Vin's_974 Messages postés 547 Date d'inscription   Statut Membre Dernière intervention   102
 
J'ai galéré pour trouvé ca, mais j'ai réussi à le trouvé.. attend jte balance le code.. Il te faudrat 5 pages en tout..

D'abord tu crées un fichier scriptlistederoulante.js

et tu colle tout ça dedans:

				     <script type="text/javascript">
					 

		     var Ld1Id=''; //initialisation des variables
		     var Ld2Id='';
		     var id_liste='';
		    
		     function ValideLd2(val) {
			Ld1Id=val; //id_service
		     id_liste='2';//Utilisé dans la fonction ChargeLd() pour identifier la liste déroulante
		    var LD_URL = 'ValideLd2.php?Ld1='+Ld1Id;
		     ObjetXHR(LD_URL)
		     // Réinitialisation de Ld3 si modification de LD1 après passage en Ld2
		    if (Ld2Id!='') {ValideLd3(''); }
		     }
		    
		     function ValideLd3(val) {
		     Ld2Id=val; //id_cellule
		    id_liste='3'; //Utilisé dans la fonction ChargeLd() pour identifier la liste déroulante
		     var LD_URL = 'ValideLd3.php?Ld1='+Ld1Id+'&Ld2='+Ld2Id;
		     if (Ld2Id=='') {var LD_URL = 'ValideLd3.php';}
		     ObjetXHR(LD_URL)
		     }
		    
		     function ObjetXHR(LD_URL) {
		     //creation de l'objet XMLHttpRequest
		     if (window.XMLHttpRequest) { // Mozilla,...
		    xmlhttp=new XMLHttpRequest();
		    //if (xmlhttp.overrideMimeType) {
		    //xmlhttp.overrideMimeType('text/xml');
		     //}
		     xmlhttp.onreadystatechange=ChargeLd;
		     xmlhttp.open("GET", LD_URL, true);
			xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			 //xmlhttp.setRequestHeaders("Content-Encoding","latin1");
			xmlhttp.setRequestHeader( "Content-type", "charset=utf-8" ); 
		     xmlhttp.send(null);
		     } else if (window.ActiveXObject) { //IE
		     xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
		     if (xmlhttp) {
		     xmlhttp.onreadystatechange=ChargeLd;
		     xmlhttp.open('GET', LD_URL, false);
			 xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		
		     xmlhttp.send();
		     }
		     }
		     // Bouton non apparent car modification de LD1 ou Ld2
		     document.getElementById('buttons').style.display='none';
		     }
		   
		     // fonction pour manipuler l'appel asynchrone
		     function ChargeLd() {
		     if (xmlhttp.readyState==4) {
		     if (xmlhttp.status==200) {
		     //span id="niv2" ou "niv3"
		     document.getElementById('niv'+id_liste).innerHTML=xmlhttp.responseText;
		     if (xmlhttp.responseText.indexOf('disabled')<=0) {
		     //focus sur liste déroulante 2 ou 3
		    document.getElementById('Liste'+id_liste).focus();
		     }
		     }
		     }
		     }
		 
		     function Affiche_Btn() {
		     document.getElementById('buttons').style.display='inline';
		     }
     </script>


Ensuite ben tu crée une page valideLD1.php (ta première liste déroulante) :

et tu mets tout ca dedan..
     <?PHP

	 	 
     include ("connexionBDD.php");//connexion a la BDD
     $rq="Select..... ;"; // Ici tu fais la requete qui renvoi tout ce que tu veux afficher dan la première liste
     $rq_pos_id=0; //position dans le SQL de la clé de la liste déroulante idem dans ValideLd2.php et ValideLd3.php
     $rq_pos_val=1; //position dans le SQL de la valeur de la liste déroulante idem dans ValideLd2.php et ValideLd3.php
    
     $result= mysql_query ($rq) or die ("Select impossible");
     $retour = '<select style="width: 320" name="Liste1" id="Liste1" size="1" onchange="ValideLd2(this[this.selectedIndex].value);">'; // Jte conseil de tout laissé par défault 
     $retour .= '<option selected value="">< Choisissez ></option>';
     if (mysql_num_rows($result) != 0) 
	 {
     while ($row = mysql_fetch_row($result)) 
	 {
     $retour .= '<option value="'. $row[$rq_pos_id] .'">'. $row[$rq_pos_val] .'</option>';
     }
     $retour .= '</select>';
     } else {
     $retour = '<input id="size" type="text" size="10" value="Aucune valeur" disabled>';
     }
     mysql_free_result($result);
     mysql_close();
     echo $retour;
	 


Maintenant tu crées un autre fichier valideLD2.php et tu mets tout ça à l'intérieur:

<?PHP
	
	
    include ("connexionBDD.php");
     $Ld1_retour =''; //id_département clé de la liste déroulante 1
    
     if (isset($_GET['Ld1'])) {$Ld1_retour = $_GET['Ld1'];}
    
     if ($Ld1_retour!='') {

     $rq="Select ... from ... where ...=".$Ld1_retour.";";//Requete retournant les infos a afficher par rapport a la 1ere liste.
     $rq_pos_id=0;
     $rq_pos_val=1;
     $result= mysql_query ($rq) or die ("Select impossible");
     $retour = '<select style="width: 320" name="Liste2" id="Liste2" size="1" onchange="ValideLd3(this[this.selectedIndex].value);">';
     $retour .= '<option selected value="">< Choisissez></option>';
    
     if (mysql_num_rows($result) != 0) {
     while ($row = mysql_fetch_row($result)) {
     $retour .= '<option value="'. $row[$rq_pos_id] .'">'. $row[$rq_pos_val] .'</option>';
     }
     $retour .= '</select>';
     } else {
     $retour = '<select style="width: 320" name="Liste2" id="Liste2" size="1" disabled><option>Aucune valeure</option></select>';
     }
     mysql_free_result($result);
     mysql_close();
     }else{
     $retour = '<select style="width: 320" name="Liste2" id="Liste2" size="1" disabled>Aucune valeure< Cellule ></option></select>';
     }
     echo $retour;
	 



Ensuite le fichier valideLD3.php et tu mets tout ca :

 <?PHP

     include ("connexionBDD.php");
     $Ld1_retour =''; //id_département clé de la liste déroulante 1
     $Ld2_retour =''; //id_commune clé de la liste déroulante 2
    
     if (isset($_GET['Ld1'])) {$Ld1_retour = $_GET['Ld1'];}
     if (isset($_GET['Ld2'])) {$Ld2_retour = $_GET['Ld2'];}
    
     if (($Ld1_retour!='')&&($Ld2_retour!='')) {
	 
     $rq="Select ..... from .....
	 WHERE ... =".$Ld1_retour." 
AND .... =".$Ld2_retour.";";// Arange toi avec les requetes
     $rq_pos_id=0;
     $rq_pos_val=0;
     $result= mysql_query ($rq) or die ("Select impossible");
     $retour = '<select style="width: 320" name="Liste3" id="Liste3" size="1" onchange="Affiche_Btn();">';
     $retour .= '<option selected value="">< Choisissez ></option>';
    
     if (mysql_num_rows($result) != 0) {
     while ($row = mysql_fetch_row($result)) {
     $retour .= '<option value="'. $row[$rq_pos_id] .'">'. $row[$rq_pos_val] .'</option>';
     }
     $retour .= '</select>';
     } else {
     $retour = '<select  style="width: 320" name="Liste3" id="Liste3" size="1" disabled>Aucune valeure< Utilisateur ></option></select>';
     }
     mysql_free_result($result);
     mysql_close();
     }else{
     $retour = '<select  style="width: 320" name="Liste3" id="Liste3" size="1" disabled>Aucune valeure< Utilisateur ></option></select>';
     }
     echo $retour;
	 


Voila et enfin ton formulaire, ta page ou tu affichera les 3 listes déroulantes tu mets ca :

(Bon moi j'ai fais sous forme de tableau, je pense que tu fais pareil.. Reprends mon exemple..)

<?php
include ("scriptlistederoulante.js"); // Mets ça tout au début de ta page enfin dans le body quoi ;)
?>



<form action=".....php" method='post'><!-- formulaire -->
		<table border="0" align="center"><!-- tableau sans bordure pour organiser et tout aligner -->
		
				<tr>
				
				<td class="titretab">1ere liste<font size="4" color="red">*</font> :</td> 
				<td>  
						    <?php
								include ("valideLd1.php"); 
								
							 ?><!--Pour remplir la liste déroulante 1-->
				</td>
				</tr>			 
				<tr>			 
				<td class="titretab">2eme liste<font size="4" color="red">*</font> :</td> 
				<td> 			 
						     <span id="niv2">

						     <?php 
								include ("valideLd2.php");
								
							 ?></span> <!--Pour remplir la liste déroulante 2-->
				</td>			 
						  
				<tr>			 
				<td class="titretab">3eme liste<font size="4" color="red">*</font> :</td> 
				<td> 


						  <span id="niv3">
						     <?php 
								include ("valideLd3.php"); 
							 ?></span> <!--Pour remplir la liste déroulante 3-->
						  
						 
						  
				</td>	
			</tr>

</table>




Voila j'espère que t'a compri et que j'tai aidé.. Bon courage .. Si tu réussi dit moi, car moi j'ai un ptit soucis d'accent. J'aimerais savoir si tu aura le meme souci..

Cordialement

0
mousc
 
Bonjour,
Merci beaucoup pour ton code, pour le moment, ça m'affiche des erreurs sur la page de formulaire et je suis entrain de bien vérifier ce qui cloche comme erreur.
Je te tiendrai informer de la suite dès que possible.

Merci encore une fois.
0
974_Vin's_974 Messages postés 547 Date d'inscription   Statut Membre Dernière intervention   102
 
ok ;)
0
mousc
 
Bonjour,
C'est encore moi,
Je suis parvenu à enlever les erreurs qui s’affichaient, c’étaient dues aux fonctions que j’utilisais dans mes pages. Maintenant il y a un problème qui se pose, je n’arrive pas à obtenir de valeur au niveau de mon deuxième combobox. Le test : "
mysql_num_rows($result)
" me renvoie dans tous les cas la valeur 0.
Par contre sur le troisième combobox, ça marche sans problème.
J’essaie toujours de trouver la solution et je te ferai signe dès que tout marcherait.
Merci :)
0
mousc Messages postés 4 Date d'inscription   Statut Membre Dernière intervention  
 
re,
En fait j'ai trouvé où se situe le problème, en fait dans le fichier "valideLD1.php", le résultat (qui devra s'afficher) supprime tout le reste du résultât se situant après un espace, par contre ça fonctionne très bien dans le fichier "valideLD2.php", j'arrive pas à voir pourquoi ça affiche le résultat ainsi :(
0
974_Vin's_974 Messages postés 547 Date d'inscription   Statut Membre Dernière intervention   102
 
Ca blok a kel niveau ??? si tu veux j'ai une autre solution, qui ressemble un peu à ça, et je comprend bcp mieu.. Car cette solution je l'ai trouvé sur un tuto, mais il é pas vraiment optimum, et hier jai optimiser la chose, du coup je comprends beaucoup mieux.. Enfin si tu veux on peux reprendre, je te renvoi un otre code..
0
mousc Messages postés 4 Date d'inscription   Statut Membre Dernière intervention  
 
En fait, ça bloque au niveau du fichier "scriptlistederoulante.js" Il y a un script dans ce fichier qui empêche l'affichage complet lors du renvoi de la valeur du premier combobox au deuxième, et vu que je m'y connais très peu en ajax, j'ai dû mal à resoudre ce pb, sinon tout le reste marche à merveille.
Par contre si tu as un autre script qui permet de résoudre ce problème et qui est vraiment optimisé, je serai preneur :)

Merci pour tout cet effort.
0
974_Vin's_974 Messages postés 547 Date d'inscription   Statut Membre Dernière intervention   102
 
Ok ben atten je te donne l'autre, il est plus simple... Il te faudra remplacer les codes dans les pages..

Alors la page valideLD1.php :

include ("connexionBDD.php"); //Connexion BDD
     $rq="Select ... FROM ..."; //Requete retournant les éléments que tu souhaite afficher dans la premiere ligne
     $rq_pos_id=0; //position dans le SQL de la clé de la liste déroulante 
     $rq_pos_val=1; //position dans le SQL de la valeur de la liste déroulante
     $result= mysql_query ($rq) or die ("Select impossible");
	 
	 
     $retour = '<select style="width: 320" name="Liste1" id="Liste1" size="1" onchange="remplir_form(this[this.selectedIndex].value);">';
     $retour .= '<option selected value="">< Choisissez ></option>';
     if (mysql_num_rows($result) != 0) 
	 {
     while ($row = mysql_fetch_row($result)) 
	 {
     $retour .= '<option value="'. $row[$rq_pos_id] .'">'. $row[$rq_pos_val] .'</option>';
     }
     $retour .= '</select>';
     } else {
     $retour = '<input id="size" type="text" size="10" value="Aucune valeur" disabled>';
     }
     mysql_free_result($result);
     mysql_close();
     echo $retour;



Ensuite la page scriptlistederoulante.js : (completement diférente)


	 
		 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,pouvez-vous le mettre à jour?..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
		     
			 
			 
			 
			 
			function remplir_form(idServ)
			{
				//pour l'exemple on recupere l'id courant à l'intérieur de la fonction
				//mais normalement c'est un parametre à passer à la fonction....
				var Ld1Id=idServ;
				var xhr = getXhr();
				// On définit ce qu'on va faire quand on aura la réponse
				//pour les methodes de l'objet xhr allez faire un tour le net;) 
				
				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)
					{
						//la reponse est retournée au format texte(pour faire de l'ajaX le format de retour doit etre du Xml....)
						lareponse = xhr.responseText;
						//allez :il faut traiter la chaine de caractere renvoyee par le script php(action.php)
							
							var w = document.getElementById("Liste2");
							var content = w.innerHTML;
							content = lareponse;
							w.disabled = false;
							w.innerHTML = content;
							//A voir >>>DOM(pour l'accès et modifications d'une page web en direct
							//document.getElementById('Liste2').innerHTML = lareponse;
					}
				}
				// Ici on va voir comment faire du post
				//il faut verifier a koi correspond la valeur true.....
				xhr.open("POST","valideLD2.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
				// ne pas oublier de poster les arguments
				
				xhr.send("Ld1="+Ld1Id);
			}




Ensuite la page valideLD2.php :

@header('Content-type:text/xml; charset=utf-8');
	
    include ("connexionBDD.php");
     $Ld1_retour =''; //id_département clé de la liste déroulante 1
    
     if (isset($_POST['Ld1'])) {$Ld1_retour = $_POST['Ld1'];}
	 
	 
     if ($Ld1_retour!='') {

     $rq="Select ... FROM ... where ...=".$Ld1_retour.""; //Requete retournant les infos selon le chois de la premiere liste
     $rq_pos_id=0;
     $rq_pos_val=1;

     $result= mysql_query ($rq) or die ("Select impossible");
     $retour = '';
     $retour .= '<option selected value="">< Choisissez ></option>';
    
     if (mysql_num_rows($result) != 0) {
     while ($row = mysql_fetch_row($result)) {
     $retour .= '<option value="'. $row[$rq_pos_id] .'">'. htmlentities($row[$rq_pos_val]) .'</option>';
     }
     $retour .= '';
     } else {
     $retour = '<select style="width: 320" name="Liste2" id="Liste2" size="1" disabled><option>< Cellule ></option></select>';
     }
     mysql_free_result($result);
     mysql_close();
     }else{
     $retour = '<select style="width: 320" name="Liste2" id="Liste2" size="1" disabled><option>< Cellule ></option></select>';
     }
     echo $retour;
	 


et enfin ton formulaire :

<tr>
							<td>Liste 1 :</td> 
							<td>  
						       <?php
							   include("valideLD1.php"); //Affichage de la liste déroulante 1
							   ?>
							</td>
						</tr>		
						
						<tr>			 
							<td>Liste 2 :</td> 
							<td> 			 
								<span id="niv2">
									<select style="width: 320" name="Liste2" id="Liste2");" disabled="disabled"><!-- Liste deroulante, permettant de choisir les cellules selon le service -->
										<option>< Choisissez ></option><!-- le premier element afficher dans la liste deroulante -->
									</select>
								</span> <!--Pour remplir la liste déroulante 2-->
							</td>			 
						</tr>	
						



Voila si ca bug dit moi !!!!et surtout si tu compren pa un truc dde moi !!!
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
mousc Messages postés 4 Date d'inscription   Statut Membre Dernière intervention  
 
J'essaie code et je te tiens au courant...
0
mousc Messages postés 4 Date d'inscription   Statut Membre Dernière intervention  
 
J'ai essayé ce code, quand je sélectionne une valeur dans le premier combobox, le second reste inchangé, et dans ce script, tu n'aurai pas oublié le 3èm combobox? Puisqu'il y a aucune donnée concernant pour le fichier "valideLD3.php".
0
974_Vin's_974 Messages postés 547 Date d'inscription   Statut Membre Dernière intervention   102
 
Ahhhh tu as 3 liste .. lol j'avais oublié.. Mias je te donneré apré, d'abord il faut que ca marche pour la première et la deuzieme, déja tu voi bien la premiere liste ??? ya bien les info nan ????

Qu'est ce qui marche pas ?????


0
mousc
 
Je vois bien la première liste avec les info, quand on click sur une valeur dans la liste, le second combobox ne réagit pas, il reste grisé (en gros pas d'interaction). Il doit y a voir une ptite erreur quelque part dans le code.
0
974_Vin's_974 Messages postés 547 Date d'inscription   Statut Membre Dernière intervention   102
 
Donne moi ton code ... Enfin ce qui est necessaire ..



0
mousc
 
Est-ce que c'est possible de t'envoyer ça par mail? Comme ça je t'envoie la structure et le contenu de la base de donnée nécessaire au formulaire, avec le formulaire en intégral (le tout zippé)....
0
974_Vin's_974 Messages postés 547 Date d'inscription   Statut Membre Dernière intervention   102
 
Ok stu veux, mais tu m'explikera comment je fé pour ouvrir tout ça, je gagne pa faire ca moi loool !!


Allez jte fil mon e-mail : vins.974@hotmail.fr

A tte !!!
0