PHPfrance

la communauté d'entraide francophone dédiée au PHP

liste déroulante liée

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : liste déroulante liée

Re: liste déroulant lié

par patrice.dum » 06 sept. 2009, 10:43

Bonjour, j'ai essaye d'utiliser jquery mais je bloque toujours sur mon pb, en faisant des recherche j'ai bien trouvé un exemple que je n'arrive pas à transcrire dans mon cas (http://www.codeassembly.com/Simple-chai ... or-jQuery/)
en fait dans mon cas j'ai 5 requête lié à une base de donnée :shock: quelqu'un peut il m'aider car je m'en sort plus help!!! merci
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.chainedSelects.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
	$('#Liste1').chainSelect('#Liste2','combobox.php',
	{ 
		before:function (target) //before request hide the target combobox and display the loading message
		{ 
			$("#loading").css("display","block");
			$(target).css("display","none");
		},
		after:function (target) //after request show the target combobox and hide the loading message
		{ 
			$("#loading").css("display","none");
			$(target).css("display","inline");
		}
	});
	$('#Liste2').chainSelect('#Liste3','combobox.php',
	{ 
		before:function (target) 
		{ 
			$("#loading").css("display","block");
			$(target).css("display","none");
		},
		after:function (target) 
		{ 
			$("#loading").css("display","none");
			$(target).css("display","inline");
		}
	});
	$('#Liste3').chainSelect('#Liste4','combobox.php',
	{ 
		before:function (target) 
		{ 
			$("#loading").css("display","block");
			$(target).css("display","none");
		},
		after:function (target) 
		{ 
			$("#loading").css("display","none");
			$(target).css("display","inline");
		}
	});
	$('#Liste4').chainSelect('#Liste5','combobox.php',
	{ 
		before:function (target) 
		{ 
			$("#loading").css("display","block");
			$(target).css("display","none");
		},
		after:function (target) 
		{ 
			$("#loading").css("display","none");
			$(target).css("display","inline");
		}
	});
});
</script>
<style>
#loading {
	position:absolute;
	top:0px;
	right:0px;
	background:#ff0000;
	color:#fff;
	font-size:14px;
	font-familly:Arial;
	padding:2px;
	display:none;
}
</style>
<title>Document sans titre</title>
</head>
<body>
<div id="loading">Loading ...</div>
<div id="Les5LD">
  <p>Select your choice from the drop-down lists.</p>
  <form name="formname" method="post" action="">
    <!-- <form method="post" action="search_sales.html" class="_form" id="search_id">-->
    <!-- country combobox -->
    <?PHP
include ("includes/config.inc.php");
$rq="Select pays, id FROM matable WHERE quartier = 'n' AND publie = 'o' GROUP BY pays ORDER BY pays ASC";
$rq_pos_id=1;
$rq_pos_val=0;
$result= mysql_query ($rq) or die ("Select impossible");
$retour = '<p><label for="Liste1">Pays :</label>
<select name="Liste1" id="Liste1" size="1">';
$retour .= '<option selected value="">Choisir...</option>';
if (mysql_num_rows($result) != 0) {
	while ($row = mysql_fetch_row($result)) {
		$retour .= '<option value="'. $row[$rq_pos_val] .'">'. $row[$rq_pos_val] .'</option>';
		}
		$retour .= '</select></p>';
	echo $retour;
}
?>

    <p><label for="Liste2">Geographique Zone :</label>
    <select name="Liste2" id="Liste2" style="display:none">
    </select>
    </p>
 
    <p><label for="Liste3">Locality :</label>
    <select name="Liste3" id="Liste3" style="display:none">
    </select>
    </p>

    <p><label for="Liste4">Type :</label>
    <select name="Liste4" id="Liste4" style="display:none">
    </select>
    </p>

    <p><label for="Liste5">Budget :</label>
    <select name="Liste5" id="Liste5" style="display:none">
    </select>
    </p>
  </form>
</div>
</body>
</html>
(les codes aux niveaux des requétes n'est pas bon (<option...) mais je le met pour donnée une idée des valeurs que je souhaite récupérer) 
<?php
/* Exemple du code trouvé
$array = array();
if ($_GET['_name'] == 'Liste1') 
{

$array = array();
if ($_GET['_name'] == 'country') 
{
	 if ( $_GET['_value'] == 3 )//usa
	 {
		$array[] = array('1' => 'New York');
		$array[] = array('2' => 'Montana');	
		$array[] = array('3' => 'Texas');	
	  } else
	  {
		$array[] = array('0' => 'No state');
	  }
} elseif ($_GET['_name'] == 'state') 
{
	 if ( $_GET['_value'] == 2 )//New York
	 {
		$array[] = array('1' => 'New York');
		$array[] = array('2' => 'Another city');	
	  } else
	  {
		$array[] = array('0' => 'No city');
	}
} else
{
	$array[] = array('1' => 'Data 1');
	$array[] = array('2' => 'Data 2');	
	$array[] = array('3' => 'Data 3');	
	$array[] = array('4' => 'Data 4');	
	$array[] = array('5' => 'Data 5');	
}
echo json_encode( $array );
*/
// mon code à moi
//liste 2 ------------------------------------------------------------------------------------------------------

if ( $_GET['_value'] == $Ld1 )
//if (isset($_GET['Ld1'])) {$Ld1_retour = $_GET['Ld1'];}
	{
	$rq_zone_geographique="Select zone_geographique FROM matable WHERE quartier = 'n' AND publie = 'o' AND pays='".$Ld1_retour."' GROUP BY zone_geographique ORDER BY zone_geographique ASC";
	$rq_pos_id_zone_geographique=0;
	$rq_pos_val_zone_geographique=0;
	$result_zone_geographique= mysql_query ($rq_zone_geographique) or die ("Select impossible");

	if (mysql_num_rows($result_zone_geographique) != 0) {
		while ($row = mysql_fetch_row($result_zone_geographique)) {
			$retour_zone_geographique .= '<option value="'. $row[$rq_pos_val] .'">'. $row[$rq_pos_val] .'</option>';
		}
		else {
		$array[] = array('0' => 'Rien');
	}
	} else {
		$array[] = array('0' => 'Rien');
	}
}



//liste 3-----------------------------------------------------------------------------------------------------

if (($Ld1_retour!='')&&($Ld2_retour!='')) {
	$rq_locality="Select locality FROM realestate WHERE matable = 'n' AND publie = 'o' AND pays='".$Ld1_retour."' AND zone_geographique='".$Ld2_retour."' GROUP BY locality ORDER by locality ASC;";
//	$rq_pos_id=1;
	$rq_pos_val_locality=0;
	$result= mysql_query ($rq) or die ("Select impossible");
	$retour = '<p><label for="Liste3">Locality :</label><select name="Liste3" id="Liste3" size="1"  onchange="ValideLd4(this[this.selectedIndex].value);">';
	$retour .= '<option selected value="">Choisir...</option>';

	if (mysql_num_rows($result) != 0) {
		while ($row_locality = mysql_fetch_row($result_locality)) {
			$retour_locality .= '<option value="'. $row[$rq_pos_val_locality] .'">'. $row[$rq_pos_val_locality] .'</option>';
		}
		$retour_locality .= '</select></p>';
	} else {
		$array[] = array('0' => 'Rien');
	}
}



//liste 4-----------------------------------------------------------------------------------------------------

if (($Ld1_retour!='')&&($Ld2_retour!='')&&($Ld3_retour!='')) {
	$rq_type_hab="Select type_hab FROM matable WHERE quartier = 'n' AND publie = 'o' AND pays='".$Ld1_retour."' AND zone_geographique='".$Ld2_retour."' AND locality='".$Ld3_retour."' GROUP BY type_hab ORDER BY type_hab ASC;";
	//$rq_pos_id=0;
	$rq_pos_val_type_hab=0;
	$result= mysql_query ($rq) or die ("Select impossible");

	if (mysql_num_rows($result) != 0) {
		while ($row_type_hab = mysql_fetch_row($result_type_hab)) {
			$retour_type_hab .= '<option value="'. $row[$rq_pos_val_type_hab] .'">'. $row[$rq_pos_val_type_hab] .'</option>';
		}
	} else {
		$array[] = array('0' => 'Rien');
	}
}


//liste 5-----------------------------------------------------------------------------------------------------

if (($Ld1_retour!='')&&($Ld2_retour!='')&&($Ld3_retour!='')&&($Ld4_retour!='')) {
	$rq_id_budget_id="Select matable.id_budget, matable_budget.budget_cat FROM matable, matable_budget WHERE quartier='n' AND publie='o' AND  pays='".$Ld1_retour."' AND zone_geographique='".$Ld2_retour."' AND locality='".$Ld3_retour."' AND  type_hab='".$Ld4_retour."' AND matable.id_budget =  matable_budget.id_budget GROUP BY matable_budget.budget_cat ORDER BY matable_budget.budget_cat ASC";
	$rq_pos_id_id_budget=0;
	$rq_pos_val_id_budget=1;
	$result_id_budget= mysql_query ($rq_id_budget) or die ("Select impossible!");

	if (mysql_num_rows($result_id_budget) != 0) {
		while ($row_id_budget = mysql_fetch_row($result_id_budget)) {
			$retour_id_budget .= '<option value="'. $row[$rq_pos_id_id_budget] .'">'. $row[$rq_pos_val_id_budget] .'</option>';
		}
	} else {
		$array[] = array('0' => 'Rien');
	}
}


} else
{
	$array[] = array('1' => 'Data 1');
	$array[] = array('2' => 'Data 2');	
	$array[] = array('3' => 'Data 3');	
	$array[] = array('4' => 'Data 4');	
	$array[] = array('5' => 'Data 5');	
}

mysql_free_result();
mysql_close();
echo json_encode( $array );
?>

Re: liste déroulant lié

par monintranet » 24 août 2009, 10:59

Je ne saurais trop te conseiller d'utiliser jQuery pour faire ce que tu souhaites faire. Cela va grandement te simplifier la vie...

liste déroulante liée

par patrice.dum » 24 août 2009, 09:04

Bonjour,
Je cherche à modifier mon code ci-dessous pour l'améliorer, mais javascript n'est pas ma tasse de thé :(
Voilà mon problème: j'ai 5 cinq listes déroulantes liées entre elles et mises à jour en ajax.
Ce que je n'arrive pas à faire, c'est réinitialiser les valeurs quand on change une des listes, c'est à dire si on va jusque la liste 5 et que l'on veut changer la liste 2 je voudrais que les listes 3, 4 et 5 se remettent à l'état initial.
La seconde chose que j'aimerais modifier, c'est l'affichage du bouton submit à la fin, je voudrais qu'il soit visible tout le temps mais inactif (disabled) sauf quand le choix est fait dans ma liste 5.

J'ai tenté pas mal de chose mais mes connaissances en javascript et ajax sont limité :?
quelqu'un peut il m'aider ?
merci.

javascript code: 
Ld1Id='';
Ld2Id='';
Ld3Id='';
Ld4Id='';
Ld5Id='';
id_liste='';

function ValideLd2(val) {
	Ld1Id=val;
	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('');	}

//code que j'ai ajouter mais ça marche pas
	if (Ld2Id!='') {ValideLd4('');	}
	if (Ld2Id!='') {ValideLd5('');	}
}

function ValideLd3(val) {
	Ld2Id=val;
	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)
if (Ld3Id!='') {ValideLd4('');}
}
function ValideLd4(val) {
	Ld3Id=val; 
	id_liste='4'; //Utilisé dans la fonction ChargeLd() pour identifier la liste déroulante
	var LD_URL = 'ValideLd4.php?Ld1='+Ld1Id+'&Ld2='+Ld2Id+'&Ld3='+Ld3Id;
	if (Ld3Id=='') {var LD_URL = 'ValideLd4.php';}	
	ObjetXHR(LD_URL)
if (Ld4Id!='') {ValideLd5(''); }
}
function ValideLd5(val) {
	Ld4Id=val;
	id_liste='5'; //Utilisé dans la fonction ChargeLd() pour identifier la liste déroulante
	var LD_URL = 'ValideLd5.php?Ld1='+Ld1Id+'&Ld2='+Ld2Id+'&Ld3='+Ld3Id+'&Ld4='+Ld4Id;
	if (Ld4Id=='') {var LD_URL = 'ValideLd5.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.send(null);
	} else if (window.ActiveXObject) { //IE 
		xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); 
		if (xmlhttp) {
			xmlhttp.onreadystatechange=ChargeLd;
			xmlhttp.open('GET', LD_URL, false);
			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';
}
Ma page principale: 
<p>Select your choice from the drop-down lists.</p>
      <form method="post" action="sales.html" class="_form" id="search_id">
        <?php include 'ValideLd1.php'; ?>
        <!--Pour remplir la liste déroulante 1-->
        <span id="niv2">
        <?php include 'ValideLd2.php'; ?>
        </span>
        <!--Pour remplir la liste déroulante 2-->
        <span id="niv3">
        <?php include 'ValideLd3.php'; ?>
        </span>
        <!--Pour remplir la liste déroulante 3-->
        <span id="niv4">
        <?php include 'ValideLd4.php'; ?>
        </span>
        <!--Pour remplir la liste déroulante 4-->
        <span id="niv5">
        <?php include 'ValideLd5.php'; ?>
        </span>
        <!--Pour remplir la liste déroulante 5-->
        <span id="buttons">
        <p class="type-button"><br />
          <input type="submit" value="submit">
        </p>
        </span>
      </form>
Mon code des listes déroulant (en fait j'ai 5 page dans le même genre): 
<?php
include ("includes/config.inc.php");
$Ld1_retour ='';
$Ld2_retour ='';	
$Ld3_retour ='';
$Ld4_retour ='';

if (isset($_GET['Ld1'])) {$Ld1_retour = $_GET['Ld1'];}
if (isset($_GET['Ld2'])) {$Ld2_retour = $_GET['Ld2'];}
if (isset($_GET['Ld3'])) {$Ld3_retour = $_GET['Ld3'];}
if (isset($_GET['Ld4'])) {$Ld4_retour = $_GET['Ld4'];}

if (($Ld1_retour!='')&&($Ld2_retour!='')&&($Ld3_retour!='')&&($Ld4_retour!='')) {
	$rq="ma_requete";
	$rq_pos_id=0;
	$rq_pos_val=1;
	$result= mysql_query ($rq) or die ("Select impossible!");
	$retour = '<p><label for="Liste5">Budget :</label><select name="Liste5" id="Liste5" size="1" onchange="Affiche_Btn();">';
	$retour .= '<option selected value="">Choisir...</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></p>';
	} else {
		$retour = '<p><label for="Liste5">Budget :</label><input id="Liste5" type="text" size="10" value="Aucune valeur" disabled></p>';
	}
	mysql_free_result($result);
	mysql_close();
}else{
	$retour = '<p><label for="Liste5">Budget :</label><select name="Liste5" id="Liste5" size="1" disabled><option>Aucune valeur</option></select></p>';
}	
echo $retour
?>