3 listes automatiques en fonction de la sélection

Bonjour à tous,

J'ai une deuxième liste déroulante qui se remplie en fonction de la sélection dans la première liste, cela fonctionne parfaitement et maintenant j'essaye de remplir une troisième liste en fonction du choix dans le deuxième.

Et la je bloque depuis plusieurs jours.

Merci de votre aide.

Voici mon formulaire avec les trois listes

				<legend>Type de transaction</legend>
				&nbsp;&nbsp;&nbsp;&nbsp;<label>Types</label>
				<select name='types' id='types' onchange='go2()'>
					<option value='-1'>Aucun</option>
					<?php
						$requet2 = "SELECT * FROM z_numero_compte ORDER BY type";									
						$result2 = $mysqli->query($requet2) or die ('Erreur '.$requet2.' '.$mysqli->error);
						while ($row2 = $result2->fetch_array())						{
							echo "<option value='".$row2["id"]."'>".$row2["type"]."</option>";
						}
					?>
				</select>
				&nbsp;&nbsp;<label>Sous-Types</label>
				<div id='sous_type' style='display:inline' >
				<select name='sous_type' id='sous_type' onchange='go3()'>
					<option value='-1'>Choisir un sous-types</option>
				</select>
				</div>
				&nbsp;&nbsp;<label>Beneficiaire</label>
				<div id='beneficiaire' style='display:inline'>
				<select name='beneficiaire' id='beneficiaire' >
					<option value='-1'>Choisir un beneficiaire</option>
				</select>
				</div>	

Voici le JavaScript

<script type='text/javascript'>
			function getXhr2(){
               var xhr2 = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr2 = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr2 = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr2 = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr2 = false; 
				} 
                return xhr2;
			}
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go2(){
				var xhr2 = getXhr2();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr2.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr2.readyState == 4 && xhr2.status == 200){
						leselect2 = xhr2.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('sous_type').innerHTML = leselect2;
					}
				}
				// Ici on va voir comment faire du post
				xhr2.open("POST","ajaxsoustypes.php",true);
				// ne pas oublier ça pour le post
				xhr2.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('types');
				id_type = sel.options[sel.selectedIndex].value;
				xhr2.send("id_type="+id_type);
			}
			function go3(){
				var xhr3 = getXhr2();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr3.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr3.readyState == 4 && xhr3.status == 200){
						leselect2 = xhr3.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('beneficiaire').innerHTML = leselect2;
					}
				}
				// Ici on va voir comment faire du post
				xhr3.open("POST","ajaxsoustypes2.php",true);
				// ne pas oublier ça pour le post
				xhr3.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('sous_type');
				id_type2 = sel.options[sel.selectedIndex].value;
				xhr3.send("id_type2="+id_type2);
			}
</script>	

Le fichier pour remplir la liste 2

	echo "<select name='sous_type'>";
	if(isset($_POST["id_type"])){
	$requet2 = "SELECT id,sous_type FROM z_numero_compte_2 
			WHERE id_type=".$_POST["id_type"]." ORDER BY sous_type";
	$result2 = $mysqli->query($requet2) or die ('Erreur '.$requet2.' '.$mysqli->error);
	while ($row2 = $result2->fetch_array()){
			echo "<option value='".$row2["sous_type"]."'>".$row2["sous_type"]."</option>";
		}
	}
	echo "</select>";

Le fichier pour remplir la liste 3

	echo "<select name='beneficiaire'>";
	if(isset($_POST["id_type"])){
	$requet22 = "SELECT id,sous_type2 FROM z_numero_compte_3 
			WHERE id_type2=".$_POST["id_type"]." ORDER BY sous_type2";
	$result22 = $mysqli->query($requet22) or die ('Erreur '.$requet22.' '.$mysqli->error);
	while ($row22 = $result22->fetch_array()){
			echo "<option value='".$row22["sous_type2"]."'>".$row22["sous_type2"]."</option>";
		}
	}
	echo "</select>";

Bonne soirée à tous

Si je comprend bien c'est la liste "beneficiaire" que tu veux remplir ? pourquoi n epas faire une methode go4, qui reprend les mêmes concepts ajax que go3 ?

et pour la troisième liste, au niveau SQL, tu te base sur id_type, alors que tu .send() id type2

xhr3.send("id_type2="+id_type2);

Le fichier pour remplir la liste 3

[....]
	if(isset($_POST["id_type"])){
	[....]WHERE id_type2=".$_POST["id_type"]."[....]
	

Modifié par JENCAL (08 Sep 2016 - 11:55)