Page 1 sur 1

3 listes déroulantes liées

Posté : 11 oct. 2006, 22:10
par StarT
Bonsoir; je voulais créer deux listes déroulantes ( pays et villes ) l'une liée à l'autre et j'ai réussi à le faire graçe à un code javascript; maintenant je veux ajouter une 3ieme liste déroulante ( régions ) liée à ( villes ); ça fait 3 jours que j'essaie en vain, pouvez-vous m'aider ?


index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>:: LACENTRALE IMMOBILIERE ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--Fireworks 8 Dreamweaver 8 target.  Created Mon Oct 31 13:28:32 GMT+0000 (Greenwich) 2005-->

<style type="text/css">
<!--
body {
	background-color: #F49902;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.style2 {FONT-FAMILY:Tahoma; COLOR: #ECC600; font-size: 11px;}
.style1 {color: #FFFFFF}
.Style4 {FONT-FAMILY: Tahoma; COLOR: #ECC600; font-size: 11px; font-weight: bold; }
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: #ED9F01;
}
a:active {
	text-decoration: none;
}
-->
</style>
	<script type='text/javascript'>
			var xhr = null; 
	 
			function getXhr(){
				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; 
				} 
			}
			
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function affich(){
				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('subville').innerHTML = leselect;
					}
				}

				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxville.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'auteur
				sel = document.getElementById('pays');
				idpays = sel.options[sel.selectedIndex].value;
				xhr.send("idPays="+idpays);
			}	
		
		</script>

</head>
<body>


<table width="785" border="0" align="center" cellpadding="0" cellspacing="0">
  <!-- fwtable fwsrc="charte1.png" fwbase="index.jpg" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->
  <tr> 
    <td><img src="images/spacer.gif" width="12" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="12" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="14" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="118" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="16" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="49" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="50" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="61" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="407" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="28" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="17" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="12"><img name="index_r1_c1" src="images/index_r1_c1.jpg" width="785" height="4" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="4" border="0" alt=""></td>
  </tr>
  <tr> 
    <td rowspan="4" colspan="3"><img name="index_r2_c1" src="images/index_r2_c1.jpg" width="38" height="71" border="0" alt=""></td>
    <td rowspan="3" colspan="4"><img name="index_r2_c4" src="images/index_r2_c4.jpg" width="184" height="68" border="0" alt=""></td>
    <td colspan="5"><img name="index_r2_c8" src="images/index_r2_c8.jpg" width="563" height="5" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="5" border="0" alt=""></td>
  </tr>
  <tr> 
    <td rowspan="3"><img name="index_r3_c8" src="images/index_r3_c8.jpg" width="50" height="66" border="0" alt=""></td>
    <td colspan="2"><img name="index_r3_c9" src="images/CIH.gif" width="468" height="60" border="0" alt=""></td>
    <td rowspan="3" colspan="2"><img name="index_r3_c11" src="images/index_r3_c11.jpg" width="45" height="66" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="60" border="0" alt=""></td>
  </tr>
  <tr> 
    <td rowspan="2" colspan="2"><img name="index_r4_c9" src="images/index_r4_c9.jpg" width="468" height="6" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="3" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="4"><img name="index_r5_c4" src="images/index_r5_c4.jpg" width="184" height="3" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="3" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="12" background="images/index_r6_c1.jpg"><table width="100%" border="0" cellspacing="0" cellpadding="0">

        <tr> 
          <td width="39%">&nbsp;</td>
          <td width="57%" class="txt11"><div align="center"><a href="index.php" class="txt11">Home</a> 
              | <a href="presentation.php" class="txt11">Qui sommes-nous</a> | 
              <a href="ContactPub.php" class="txt11">Contact & Publicit&eacute;</a> 
              | <a href="abonnement.php" class="txt11">S'abonner</a> | <a href="favoris.php" class="txt11">Favoris</a></div></td>
          <td width="4%">&nbsp;</td>
        </tr>
      </table></td>
    <td><img src="images/spacer.gif" width="1" height="36" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="12"><img name="index_r7_c1" src="images/index_r7_c1.jpg" width="785" height="9" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="9" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="5"><img name="index_r8_c1" src="images/index_r8_c1.jpg" width="172" height="10" border="0" alt=""></td>
    <td colspan="6" rowspan="10" bgcolor="#BC1B2B"><table width="596" height="135" border="0" cellpadding="0" cellspacing="0">
        <form name="form" method="post" action="result1.php">
          <tr> 
            <td height="12" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr> 
                  <td width="12" height="12" valign="top"><img src="img-/coin1.jpg"></td>
                  <td><div align="right">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr> 
                          <td class="txt11"><label> </label> <label> </label>
                            <input name="radionchk1" type="radio" value="0" checked>
Offres
  <label>
  <input name="radionchk1" type="radio" value="1">
Demandes</label></td>
                          <td width="240" class="txt10"><div align="right"><span class="txt11">
                          <? include("gestion/config.php");
					$sql="select * from achat "; 
					$res = mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());  
$total = mysql_num_rows($res);
echo"$total Annonces Actuellement";





?>
                          </span> </div></td>
                        </tr>
                      </table>
                    </div></td>
                  <td>&nbsp;</td>
                  <td width="12" align="right" valign="top"><img src="img-/coin2.jpg" width="12" height="12"></td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td valign="middle"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr> 
                  <td height="30" valign="top"><img src="images/charte1_r10_c7.jpg" width="160" height="20"></td>
                </tr>
                <tr> 
                  <td valign="middle"><table width="100%" border="0" cellpadding="0" cellspacing="0" >
                      <tr> 
                        <td> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="txt11">
                            <tr> 
                              <td><input name="radionchk" type="radio" value="0" checked class="Textzone"></td>
                              <td>Vente</td>
                            </tr>
                            <tr> 
                              <td><input name="radionchk" type="radio" value="1" class="Textzone"></td>
                              <td>Location</td>
                            </tr>
                          </table></td>
                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0" class="txt11">
                            <tr> 
                              <td width="43%">Pays</td>
                              <td><select name='pays' id='pays' class="txt1" onChange='affich()'>
                  <option value='0'>Sélectionner</option>
                  <?
						mysql_connect("localhost","root","");
						mysql_select_db("immo_bd");
						$res = mysql_query("SELECT * FROM pays ORDER BY nom");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
						}
					?>
                </select> </td>
                            </tr>
                            <tr> 
                              <td>Ville</td>
                              <td>
							  <div id='subville' style='display:inline'>
							    <select name='sub_ville' id='ville' class="txt1">
                                  <option value='0'>Sélectionner</option>
								
                                </select>
							  </div></td>
                            </tr>
                            <tr> 
                              <td></td>
                              <td></div>
                              
                              <?  echo "<select name='details' class='txt1' >";
	mysql_connect("localhost","root","");
		mysql_select_db("immo_bd");
		$sub_ville = $_POST['sub_ville'];
		$res = mysql_query("SELECT DISTINCT Ville FROM details
			WHERE Ville='".$sub_ville."'");
			echo "<option value='0'>Aucune</option>";
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["Ville"]."'>".$row["Ville"]."</option>";
		}
			echo "</select>"; 
			
			echo $sub_ville;
			?>
                             </td>
                            </tr>
                          </table></td>
                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0" class="txt11">
                            <tr> 
                              <td>NB Pi&egrave;ces</td>
                              <td><select name="sub_type_logement" class="txt1">
                                <option value="0">S&eacute;lectionnez</option>
                                <? 
								$select2 = mysql_query("select * from logement");
								while ($row = mysql_fetch_array($select2))
								{
									$sub_type_logement = $row["type_logement"];
									echo"<option value=\"$sub_type_logement\">";
										echo"$sub_type_logement";
									echo"</option>";
								
								}
							

							?>
                                <option value="0">Autres</option>
                              </select></td>
                            </tr>
                            <tr> 
                              <td height="20">Meubl&eacute;</td>
                              <td><select name="meublier" class="txt1">
                                <option value="0">S&eacute;lectionnez</option>
                                <? 
								$select2 = mysql_query("select * from meublier");
								while ($row = mysql_fetch_array($select2))
								{
									$meuble = $row["meuble"];
									echo"<option value=\"$meuble\">";
										echo"$meuble";
									echo"</option>";
								
								}
							

							?>
                              </select></td>
                            </tr>
                            <tr> 
                              <td> <div align="left">Type de bien</div></td>
                              <td><select name="sub_type_achat" class="txt1">
                                <option value="0">S&eacute;lectionnez</option>
                                <? 
					 $select = mysql_query("select * from typeachat");
								while ($row = mysql_fetch_array($select))
								{
									$type_achat = $row["type_achat"];
									echo"<option value=\"$type_achat\">";
										echo"$type_achat";
									echo"</option>";
								
								}
							
						
							?>
                              </select></td>
                            </tr>
                          </table>
                          <div align="right"></div></td>
                      </tr>
                    </table></td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td height="12" valign="bottom"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr> 
                  <td width="12" height="12" valign="bottom"><img src="img-/coin3.jpg"></td>
                  <td width="551" align="center" valign="middle"><div align="right" class="style1"><img src="img-/trouv.jpg" width="82" height="20" onClick="form.submit()"></div></td>
                  <td width="33" align="right" valign="bottom"><img src="img-/coin4.jpg" width="12" height="12"></td>
                </tr>
              </table></td>
          </tr>
        </form>
      </table></td>
    <td rowspan="16"><img name="index_r8_c12" src="images/index_r8_c12.jpg" width="17" height="404" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="10" border="0" alt=""></td>
  </tr>
  <tr> 
    <td rowspan="15"><img name="index_r9_c1" src="images/index_r9_c1.jpg" width="12" height="394" border="0" alt=""></td>
    <td rowspan="2" colspan="3"><img name="index_r9_c2" src="images/index_r9_c2.jpg" width="144" height="24" border="0" alt=""></td>
    <td rowspan="15"><img name="index_r9_c5" src="images/index_r9_c5.jpg" width="16" height="394" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="20" border="0" alt=""></td>
  </tr>
  <tr> 
    <td><img src="images/spacer.gif" width="1" height="4" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="3"><img name="index_r11_c2" src="images/index_r11_c2.jpg" width="144" height="4" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="4" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="3"><a href="passannonce.php"><img name="index_r12_c2" src="images/index_r12_c2.jpg" width="144" height="16" border="0" alt=""></a></td>
    <td><img src="images/spacer.gif" width="1" height="16" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="3"><img name="index_r13_c2" src="images/index_r13_c2.jpg" width="144" height="4" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="4" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="3"><a href="index.php"><img name="index_r14_c2" src="images/index_r14_c2.jpg" width="144" height="17" border="0" alt=""></a></td>
    <td><img src="images/spacer.gif" width="1" height="17" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="3"><img name="index_r15_c2" src="images/index_r15_c2.jpg" width="144" height="5" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="5" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="3"><img name="index_r16_c2" src="images/index_r16_c2.jpg" width="144" height="22" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="22" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="3" rowspan="2" bgcolor="#BC1B2B"><span class="txt11"> <img src="images/fleche.gif" width="9" height="10"> <a href="conseils.php" class="txt11">NOS CONSEILS</a></span><BR>
    <span class="txt11"><img src="images/fleche.gif" width="9" height="10"> <a href="partenaires.php" class="txt11">NOS PARTENAIRES</a></span></td>
    <td><img src="images/spacer.gif" width="1" height="33" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="6"><img name="index_r18_c6" src="images/index_r18_c6.jpg" width="596" height="8" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="8" border="0" alt=""></td>
  </tr>
  <tr> 
    <td><img name="index_r19_c2" src="images/index_r19_c2.jpg" width="12" height="70" border="0" alt=""></td>
    <td colspan="2" bgcolor="#BC1B2B"><a href="architectes.php" class="style2">Architectes</a><br>
      <a href="promoteurs.php" class="style2">Promoteurs</a><br>
      <a href="bureauordre.php" class="style2">Bureaux d'&eacute;tudes</a><br> 
      <a href="topographes.php" class="style2">G&eacute;om&egrave;tres/Topographes</a><br>
      <a href="notaires.php" class="style2"> Notaires</a></td>
    <td rowspan="4" colspan="6"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="422" height="251">
      <param name="movie" value="images/banniere.swf">
      <param name="quality" value="high">
      <embed src="images/banniere.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="422" height="251"></embed>
    </object>
      <a href="http://www.philips.fr" target="_blank">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="174" height="251">
        <param name="movie" value="images/bancih.swf">
        <param name="quality" value="high">
        <embed src="images/bancih.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="174" height="251"></embed>
      </object>
    </a></td>
    <td><img src="images/spacer.gif" width="1" height="70" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="3"><a href="Reactions.php"><img name="index_r20_c2" src="images/index_r20_c2.jpg" width="144" height="69" border="0" alt=""></a></td>
    <td><img src="images/spacer.gif" width="1" height="69" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="3"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="144" height="96">
      <param name="movie" value="images/bancentral.swf">
      <param name="quality" value="high">
      <embed src="images/bancentral.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="144" height="96"></embed>
    </object></td>
    <td><img src="images/spacer.gif" width="1" height="96" border="0" alt=""></td>
  </tr>
  <tr> 
    <td rowspan="2" colspan="3"><img name="index_r22_c2" src="images/index_r22_c2.jpg" width="144" height="26" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="16" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="6"><img name="index_r23_c6" src="images/index_r23_c6.jpg" width="596" height="10" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="10" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="12"><img name="index_r24_c1" src="images/index_r24_c1.jpg" width="785" height="20" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="20" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="12"><img name="index_r25_c1" src="images/index_r25_c1.jpg" width="785" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
  </tr>
</table>
</body>
</html>
ajaxvilles.php
<?php
	echo "<select name='sub_ville' class='txt1' >";
	if(isset($_POST["idPays"])){
		mysql_connect("localhost","root","");
		mysql_select_db("immo_bd");
		$res = mysql_query("SELECT DISTINCT titre FROM villes 
			WHERE idPays=".$_POST["idPays"]." ORDER BY titre");
			echo "<option value='0'>Aucune</option>";
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["titre"]."'>".$row["titre"]."</option>";
		}
	
	echo "</select>";
	}
	
?>
Base de données :


CREATE TABLE `pays` (
`nom` varchar(50) NOT NULL default '',
`id` tinyint(4) NOT NULL default '0',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Contenu de la table `pays`
--

INSERT INTO `pays` VALUES ('France', 2);
INSERT INTO `pays` VALUES ('Maroc', 1);
CREATE TABLE `villes` (
`id` tinyint(4) NOT NULL auto_increment,
`titre` varchar(50) NOT NULL default '',
`idPays` tinyint(4) default NULL,
`details` varchar(50) NOT NULL default '',
`verif` tinyint(4) NOT NULL default '0',
PRIMARY KEY (`id`)
) ;

--
-- Contenu de la table `villes`
--

INSERT INTO `villes` VALUES (1, 'CASABLANCA', 1, '', 0);
INSERT INTO `villes` VALUES (2, 'RABAT', 1, '', 0);
INSERT INTO `villes` VALUES (3, 'FES', 1, '', 0);
INSERT INTO `villes` VALUES (4, 'PARIS', 2, '', 0);
INSERT INTO `villes` VALUES (5, 'ILE DE FRANCE', 2, 'Moise', 1);
INSERT INTO `villes` VALUES (6, 'PROVINCES', 2, '01', 2);
INSERT INTO `villes` VALUES (7, 'ILE DE FRANCE', 2, 'VAL MARNE', 1);
INSERT INTO `villes` VALUES (8, 'ILE DE FRANCE', 2, 'ESSONE', 1);
INSERT INTO `villes` VALUES (9, 'PROVINCES', 2, '01', 2);
INSERT INTO `villes` VALUES (10, 'PROVINCES', 2, '02', 2);
CREATE TABLE `details` (
`id` tinyint(4) NOT NULL auto_increment,
`plus` varchar(50) NOT NULL default '',
`idVille` tinyint(4) default NULL,
`verif` tinyint(4) default NULL,
`Ville` varchar(50) NOT NULL default '',
PRIMARY KEY (`id`)
) ;

--
-- Contenu de la table `details`
--

INSERT INTO `details` VALUES (1, 'ESSONES', 5, 1, 'ILE DE FRANCE');
INSERT INTO `details` VALUES (2, 'VAL OISE', 5, 1, 'ILE DE FRANCE');
INSERT INTO `details` VALUES (3, '01', 6, 2, 'PROVINCES');
INSERT INTO `details` VALUES (4, '02', 6, 2, 'PROVINCES');
INSERT INTO `details` VALUES (5, '03', 6, 2, 'PROVINCES');
INSERT INTO `details` VALUES (6, 'MOISE', 5, 1, 'ILE DE FRANCE');

Re: 3 listes déroulantes liées

Posté : 11 oct. 2006, 23:59
par StarT
Toujours pas de réponse ?! :cry:

Re: 3 listes déroulantes liées

Posté : 12 oct. 2006, 00:45
par Truc
Toujours pas de réponse ?! :cry:
Non mais tu as vu l'heure :axe:
Ils dorment les pti vieux du forum :roll:

Sinon le multi-postage est interdit... et CECI t'appartient ?

Ceci dit suffit d'effectuer quelque modifs sur la fonction ajax :
function affich(id,page,valeur){
                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(id).innerHTML = leselect;
                    }
                }

                // Ici on va voir comment faire du post
                xhr.open("POST",page,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'auteur              
                xhr.send("idPays="+valeur);
            } 
En passant 3 paramètres pour rendre la fonction un peu plus généraliste.
id = id du div qui va recevoir la nouvelles liste
page = la page de traitement (1er cas = ajaxvilles.php)
valeur = la valeur de la liste

Ensuite le 1er appel devient :
<select name='pays' id='pays' class="txt1" onchange='affich("subville","ajaxvilles.php",this.value)'>
Ajoute un div pour la 3ème liste :
<div id='subregion' style='display:inline'>
  <select name='sub_region' id='region' class="txt1">
        <option value='0'>Sélectionner</option>                                
  </select>
</div>
le select de la page "ajaxvilles.php" prend un événement javascript onchange :
echo "<select name='sub_region' class='txt1' onchange='affich("subregion","ajaxregion.php",this.value)'>"; 
Et pour finir tu crée le fichier "ajaxregion.php" sur le modèle de "ajaxvilles.php".

Re: 3 listes déroulantes liées

Posté : 12 oct. 2006, 09:13
par starkeus
Toujours pas de réponse ?! :cry:
Non mais tu as vu l'heure :axe:
Ils dorment les pti vieux du forum :roll:
En effet passé 21h je me couche comme une poule
8-[
Plus sérieusement pour la plupart d'entre nous, après avoir passé une journée entière devant un pc et pour la plupart pour développer ... bah le soir on se prend de temps en temps des moments de détentes loin de l'informatique :karu:

Re: 3 listes déroulantes liées

Posté : 12 oct. 2006, 12:07
par StarT
Oups voila je me suis trompée encore une fois, je me suis pas aurhentifiée sur le forum ! Milles excuses, ça sera la derniere fois promis !! :oops:

Désolée Truc pour le multi-postage c'était une mauvaise manipulation :oops: Excusez moi !

Je te remercie aussi pour ton aide ( Tu es toujours dispo ), j'ai fait tout ce que tu m'a dit ! mais toujours, je n'ai pas la liste des régions suite au choix de la ville ! je vous passe mes 3 pages de code mais je pense qu'on est proche du résultat souhaité

index.php
<style type="text/css"> 
<!-- 
body { 
    background-color: #F49902; 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
} 
.style2 {FONT-FAMILY:Tahoma; COLOR: #ECC600; font-size: 11px;} 
.style1 {color: #FFFFFF} 
.Style4 {FONT-FAMILY: Tahoma; COLOR: #ECC600; font-size: 11px; font-weight: bold; } 
a:link { 
    text-decoration: none; 
} 
a:visited { 
    text-decoration: none; 
} 
a:hover { 
    text-decoration: none; 
    color: #ED9F01; 
} 
a:active { 
    text-decoration: none; 
} 
--> 
</style>

<script type='text/javascript'> 
            var xhr = null;  
      
            function getXhr(){ 
                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;  
                }  
            } 
             
            /** 
            * Méthode qui sera appelée sur le click du bouton 
            */ 
        function affich(id,page,valeur){ 
                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(id).innerHTML = leselect; 
                    } 
                } 

                // Ici on va voir comment faire du post 
                xhr.open("POST",page,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'auteur               
                xhr.send("idPays="+valeur); 
            }  
         
        </script> 


<link href="style.css" rel="stylesheet" type="text/css" />
<table width="785" border="0" align="center" cellpadding="0" cellspacing="0">
  <!-- fwtable fwsrc="charte1.png" fwbase="index.jpg" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->
  <tr>
    <td><img src="images/spacer.gif" width="12" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="12" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="14" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="118" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="16" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="49" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="50" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="61" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="407" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="28" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="17" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="12"><img name="index_r1_c1" src="images/index_r1_c1.jpg" width="785" height="4" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="4" border="0" alt=""></td>
  </tr>
  <tr>
    <td rowspan="4" colspan="3"><img name="index_r2_c1" src="images/index_r2_c1.jpg" width="38" height="71" border="0" alt=""></td>
    <td rowspan="3" colspan="4"><img name="index_r2_c4" src="images/index_r2_c4.jpg" width="184" height="68" border="0" alt=""></td>
    <td colspan="5"><img name="index_r2_c8" src="images/index_r2_c8.jpg" width="563" height="5" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="5" border="0" alt=""></td>
  </tr>
  <tr>
    <td rowspan="3"><img name="index_r3_c8" src="images/index_r3_c8.jpg" width="50" height="66" border="0" alt=""></td>
    <td colspan="2"><img name="index_r3_c9" src="images/CIH.gif" width="468" height="60" border="0" alt=""></td>
    <td rowspan="3" colspan="2"><img name="index_r3_c11" src="images/index_r3_c11.jpg" width="45" height="66" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="60" border="0" alt=""></td>
  </tr>
  <tr>
    <td rowspan="2" colspan="2"><img name="index_r4_c9" src="images/index_r4_c9.jpg" width="468" height="6" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="3" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="4"><img name="index_r5_c4" src="images/index_r5_c4.jpg" width="184" height="3" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="3" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="12" background="images/index_r6_c1.jpg"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="39%">&nbsp;</td>
        <td width="57%" class="txt11"><div align="center"><a href="index.php" class="txt11">Home</a> | <a href="presentation.php" class="txt11">Qui sommes-nous</a> | <a href="ContactPub.php" class="txt11">Contact & Publicit&eacute;</a> | <a href="abonnement.php" class="txt11">S'abonner</a> | <a href="favoris.php" class="txt11">Favoris</a></div></td>
        <td width="4%">&nbsp;</td>
      </tr>
    </table></td>
    <td><img src="images/spacer.gif" width="1" height="36" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="12"><img name="index_r7_c1" src="images/index_r7_c1.jpg" width="785" height="9" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="9" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="5"><img name="index_r8_c1" src="images/index_r8_c1.jpg" width="172" height="10" border="0" alt=""></td>
    <td colspan="6" rowspan="10" bgcolor="#BC1B2B"><table width="596" height="135" border="0" cellpadding="0" cellspacing="0">
      <form name="form" method="post" action="result1.php">
        <tr>
          <td height="12" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="12" height="12" valign="top"><img src="img-/coin1.jpg"></td>
              <td><div align="right">
                <table border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td class="txt11"><label> </label>
                              <label> </label>
                              <input name="radionchk1" type="radio" value="0" checked>
                      Offres
                      <label>
                        <input name="radionchk1" type="radio" value="1">
                        Demandes</label></td>
                    <td width="240" class="txt10"><div align="right"><span class="txt11">
                      <? include("gestion/config.php"); 
                    $sql="select * from achat ";  
                    $res = mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());   
$total = mysql_num_rows($res); 
echo"$total Annonces Actuellement"; 





?>
                    </span> </div></td>
                  </tr>
                </table>
              </div></td>
              <td>&nbsp;</td>
              <td width="12" align="right" valign="top"><img src="img-/coin2.jpg" width="12" height="12"></td>
            </tr>
          </table></td>
        </tr>
        <tr>
          <td valign="middle"><table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td height="30" valign="top"><img src="images/charte1_r10_c7.jpg" width="160" height="20"></td>
            </tr>
            <tr>
              <td valign="middle"><table width="100%" border="0" cellpadding="0" cellspacing="0" >
                <tr>
                  <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="txt11">
                    <tr>
                      <td><input name="radionchk" type="radio" value="0" checked class="Textzone"></td>
                      <td>Vente</td>
                    </tr>
                    <tr>
                      <td><input name="radionchk" type="radio" value="1" class="Textzone"></td>
                      <td>Location</td>
                    </tr>
                  </table></td>
                  <td><table width="100%" border="0" cellspacing="0" cellpadding="0" class="txt11">
                    <tr>
                      <td width="43%">Pays</td>
                      <td>
					  <select name='pays' id='pays' class="txt1" onchange='affich("subville","ajaxville.php",this.value)'> 
                        <option value='0'>Sélectionner</option>
                     <? 
                        mysql_connect("localhost","root",""); 
                        mysql_select_db("immo_bd"); 
                        $res = mysql_query("SELECT * FROM pays ORDER BY nom"); 
                        while($row = mysql_fetch_assoc($res)){ 
                            echo "<option value='".$row["id"]."'>".$row["nom"]."</option>"; 
                        } 
                    ?>
                      </select>
                      </td>
                    </tr>
                    <tr>
                      <td>Ville</td>
                      <td><div id='subville' style='display:inline'>
                        <select name='sub_ville' id='ville' class="txt1">
                          <option value='0'>Sélectionner</option>
                        </select>
                      </div></td>
                    </tr>
                    <tr>
                      <td></td>
                      <td>
					  <div id='subregion' style='display:inline'> 
<select name='sub_region' id='region' class='txt1'>
   <option value='0'>Sélectionner</option>                                 
</select>
</div>
                      </td>
                    </tr>
                  </table></td>
                  <td><table width="100%" border="0" cellspacing="0" cellpadding="0" class="txt11">
                    <tr>
                      <td>NB Pi&egrave;ces</td>
                      <td><select name="sub_type_logement" class="txt1">
                        <option value="0">S&eacute;lectionnez</option>
                        <?  
                                $select2 = mysql_query("select * from logement"); 
                                while ($row = mysql_fetch_array($select2)) 
                                { 
                                    $sub_type_logement = $row["type_logement"]; 
                                    echo"<option value=\"$sub_type_logement\">"; 
                                        echo"$sub_type_logement"; 
                                    echo"</option>"; 
                                 
                                } 
                             

                            ?>
                        <option value="0">Autres</option>
                      </select></td>
                    </tr>
                    <tr>
                      <td height="20">Meubl&eacute;</td>
                      <td><select name="meublier" class="txt1">
                        <option value="0">S&eacute;lectionnez</option>
                        <?  
                                $select2 = mysql_query("select * from meublier"); 
                                while ($row = mysql_fetch_array($select2)) 
                                { 
                                    $meuble = $row["meuble"]; 
                                    echo"<option value=\"$meuble\">"; 
                                        echo"$meuble"; 
                                    echo"</option>"; 
                                 
                                } 
                             

                            ?>
                      </select></td>
                    </tr>
                    <tr>
                      <td><div align="left">Type de bien</div></td>
                      <td><select name="sub_type_achat" class="txt1">
                        <option value="0">S&eacute;lectionnez</option>
                        <?  
                     $select = mysql_query("select * from typeachat"); 
                                while ($row = mysql_fetch_array($select)) 
                                { 
                                    $type_achat = $row["type_achat"]; 
                                    echo"<option value=\"$type_achat\">"; 
                                        echo"$type_achat"; 
                                    echo"</option>"; 
                                 
                                } 
                             
                         
                            ?>
                      </select></td>
                    </tr>
                  </table>
                            <div align="right"></div></td>
                </tr>
              </table></td>
            </tr>
          </table></td>
        </tr>
        <tr>
          <td height="12" valign="bottom"><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="12" height="12" valign="bottom"><img src="img-/coin3.jpg"></td>
              <td width="551" align="center" valign="middle"><div align="right" class="style1"><img src="img-/trouv.jpg" width="82" height="20" onClick="form.submit()"></div></td>
              <td width="33" align="right" valign="bottom"><img src="img-/coin4.jpg" width="12" height="12"></td>
            </tr>
          </table></td>
        </tr>
      </form>
    </table></td>
    <td rowspan="16"><img name="index_r8_c12" src="images/index_r8_c12.jpg" width="17" height="404" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="10" border="0" alt=""></td>
  </tr>
  <tr>
    <td rowspan="15"><img name="index_r9_c1" src="images/index_r9_c1.jpg" width="12" height="394" border="0" alt=""></td>
    <td rowspan="2" colspan="3"><img name="index_r9_c2" src="images/index_r9_c2.jpg" width="144" height="24" border="0" alt=""></td>
    <td rowspan="15"><img name="index_r9_c5" src="images/index_r9_c5.jpg" width="16" height="394" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="20" border="0" alt=""></td>
  </tr>
  <tr>
    <td><img src="images/spacer.gif" width="1" height="4" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="3"><img name="index_r11_c2" src="images/index_r11_c2.jpg" width="144" height="4" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="4" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="3"><a href="passannonce.php"><img name="index_r12_c2" src="images/index_r12_c2.jpg" width="144" height="16" border="0" alt=""></a></td>
    <td><img src="images/spacer.gif" width="1" height="16" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="3"><img name="index_r13_c2" src="images/index_r13_c2.jpg" width="144" height="4" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="4" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="3"><a href="index.php"><img name="index_r14_c2" src="images/index_r14_c2.jpg" width="144" height="17" border="0" alt=""></a></td>
    <td><img src="images/spacer.gif" width="1" height="17" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="3"><img name="index_r15_c2" src="images/index_r15_c2.jpg" width="144" height="5" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="5" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="3"><img name="index_r16_c2" src="images/index_r16_c2.jpg" width="144" height="22" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="22" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="3" rowspan="2" bgcolor="#BC1B2B"><span class="txt11"> <img src="images/fleche.gif" width="9" height="10"> <a href="conseils.php" class="txt11">NOS CONSEILS</a></span><br>
        <span class="txt11"><img src="images/fleche.gif" width="9" height="10"> <a href="partenaires.php" class="txt11">NOS PARTENAIRES</a></span></td>
    <td><img src="images/spacer.gif" width="1" height="33" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="6"><img name="index_r18_c6" src="images/index_r18_c6.jpg" width="596" height="8" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="8" border="0" alt=""></td>
  </tr>
  <tr>
    <td><img name="index_r19_c2" src="images/index_r19_c2.jpg" width="12" height="70" border="0" alt=""></td>
    <td colspan="2" bgcolor="#BC1B2B"><a href="architectes.php" class="style2">Architectes</a><br>
        <a href="promoteurs.php" class="style2">Promoteurs</a><br>
        <a href="bureauordre.php" class="style2">Bureaux d'&eacute;tudes</a><br>
        <a href="topographes.php" class="style2">G&eacute;om&egrave;tres/Topographes</a><br>
      <a href="notaires.php" class="style2"> Notaires</a></td>
    <td rowspan="4" colspan="6"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="422" height="251">
      <param name="movie" value="images/banniere.swf">
      <param name="quality" value="high">
      <embed src="images/banniere.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="422" height="251"></embed>
    </object>
        <a href="http://www.philips.fr" target="_blank">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="174" height="251">
          <param name="movie" value="images/bancih.swf">
          <param name="quality" value="high">
          <embed src="images/bancih.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="174" height="251"></embed>
        </object>
      </a></td>
    <td><img src="images/spacer.gif" width="1" height="70" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="3"><a href="Reactions.php"><img name="index_r20_c2" src="images/index_r20_c2.jpg" width="144" height="69" border="0" alt=""></a></td>
    <td><img src="images/spacer.gif" width="1" height="69" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="3"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="144" height="96">
      <param name="movie" value="images/bancentral.swf">
      <param name="quality" value="high">
      <embed src="images/bancentral.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="144" height="96"></embed>
    </object></td>
    <td><img src="images/spacer.gif" width="1" height="96" border="0" alt=""></td>
  </tr>
  <tr>
    <td rowspan="2" colspan="3"><img name="index_r22_c2" src="images/index_r22_c2.jpg" width="144" height="26" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="16" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="6"><img name="index_r23_c6" src="images/index_r23_c6.jpg" width="596" height="10" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="10" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="12"><img name="index_r24_c1" src="images/index_r24_c1.jpg" width="785" height="20" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="20" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="12"><img name="index_r25_c1" src="images/index_r25_c1.jpg" width="785" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
  </tr>
</table>
ajaxville.php
<?php 
    echo "<select name='sub_ville' class='txt1' onchange='affich('subregion','ajaxdetail.php',this.value)'>"; 
    if(isset($_POST["idPays"])){ 
        mysql_connect("localhost","root",""); 
        mysql_select_db("immo_bd"); 
        $res = mysql_query("SELECT DISTINCT titre FROM villes  
            WHERE idPays=".$_POST["idPays"]." ORDER BY titre"); 
            echo "<option value='0'>Aucune</option>"; 
        while($row = mysql_fetch_assoc($res)){ 
            echo "<option value='".$row["titre"]."'>".$row["titre"]."</option>"; 
        } 
     
    echo "</select>"; 
    } 
     
?> 

ajaxdetail.php
<?php 
    echo "<select name='sub_region' class='txt1' >"; 
    if(isset($_POST["idPays"])){ 
        mysql_connect("localhost","root",""); 
        mysql_select_db("immo_bd"); 
     $res = mysql_query("SELECT DISTINCT detail FROM details
			WHERE idVille=".$_POST["idPays"]." ORDER BY detail");
			    echo "<option value='0'>Aucune</option>"; 
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["detail"]."'>".$row["detail"]."</option>";
		}
	}
	echo "</select>";
	
	echo "<br>";

?>
La base de données
-- --------------------------------------------------------

--
-- Structure de la table `details`
--

CREATE TABLE `details` (
`id` tinyint(4) NOT NULL default '0',
`detail` varchar(50) NOT NULL default '',
`idVille` tinyint(4) NOT NULL default '0',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Contenu de la table `details`
--

INSERT INTO `details` VALUES (1, 'oise-seine de marne', 54);
INSERT INTO `details` VALUES (2, 'essone', 54);
INSERT INTO `details` VALUES (3, '01', 61);
INSERT INTO `details` VALUES (4, '02', 61);

-- --------------------------------------------------------

--
-- Structure de la table `pays`
--

CREATE TABLE `pays` (
`id` varchar(4) NOT NULL default '',
`nom` varchar(50) NOT NULL default '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Contenu de la table `pays`
--

INSERT INTO `pays` VALUES ('1', 'Maroc');
INSERT INTO `pays` VALUES ('2', 'France');

-- --------------------------------------------------------

--
-- Structure de la table `villes`
--

CREATE TABLE `villes` (
`id` tinyint(4) NOT NULL auto_increment,
`titre` varchar(50) NOT NULL default '',
`idPays` tinyint(4) default NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=63 ;

--
-- Contenu de la table `villes`
--

INSERT INTO `villes` VALUES (1, 'CASABLANCA', 1);
INSERT INTO `villes` VALUES (2, 'RABAT', 1);
INSERT INTO `villes` VALUES (3, 'FES', 1);
INSERT INTO `villes` VALUES (54, 'ILE DE FRANCE', 2);
INSERT INTO `villes` VALUES (61, 'PROVINCES', 2);
INSERT INTO `villes` VALUES (53, 'PARIS', 2);
INSERT INTO `villes` VALUES (7, 'AGADIR', 1);
INSERT INTO `villes` VALUES (62, 'Autres', 2);
Merci infiniment !

Re: 3 listes déroulantes liées

Posté : 12 oct. 2006, 15:08
par StarT
C bon, j'ai reglé le problème !! :D
Merci infiniment Truc tu m'a bien guidé, je voulais juste savoir un truc, on peut pas passer dans le code javascript une autre variable au lieu de l'ID ?

Posté : 12 oct. 2006, 21:21
par Truc
On peut y passer tout ce qu'on veut... tu penses à quoi ?
Si l'id passe dans la fonction (en tant que paramètre) c'est parce qu'elle sera utile.

Posté : 25 oct. 2006, 03:25
par franckycorp
Bonsoir ou bonjour

Je suis en train de réaliser également 3 listes déroulantes
J'ai adapté selon les paramètres ce qu'il a ete proposé mais en vain
Ma seconde liste n'est pas actualisée
Je ne vois pas ou plus (vu l'heure) d'ou vient le problème
Je joins mes fichiers ci dessous :
- base sql
- listes.php (page contenant les listes deroulantes)
- villes.php (page de la liste deroulante villes)
- stations.php (page de la liste deroulante stations)

Base SQL

Code : Tout sélectionner

-- Structure de la table `table_departement` -- CREATE TABLE `table_departement` ( `id_departement` int(11) NOT NULL auto_increment, `nom_departement` varchar(100) NOT NULL default '', PRIMARY KEY (`id_departement`) ) ENGINE=MyISAM AUTO_INCREMENT=3 ; -- -- Contenu de la table `table_departement` -- INSERT INTO `table_departement` VALUES (1, 'Var'); INSERT INTO `table_departement` VALUES (2, 'Vaucluse'); -- -------------------------------------------------------- -- Structure de la table `table_villes` -- CREATE TABLE `table_villes` ( `id_villes` int(11) NOT NULL auto_increment, `nom_villes` varchar(255) NOT NULL default '', `id_departement` int(11) NOT NULL default '0', PRIMARY KEY (`id_villes`) ) ENGINE=MyISAM AUTO_INCREMENT=8 ; -- -- Contenu de la table `table_villes` -- INSERT INTO `table_villes` VALUES (1, 'Toulon', 1); INSERT INTO `table_villes` VALUES (2, 'Hyères', 1); INSERT INTO `table_villes` VALUES (3, 'Garde (la)', 1); INSERT INTO `table_villes` VALUES (4, 'Pierrefeu', 1); INSERT INTO `table_villes` VALUES (5, 'Orange', 2); INSERT INTO `table_villes` VALUES (6, 'Avignon', 2); INSERT INTO `table_villes` VALUES (7, 'Uchaux', 2); -- -------------------------------------------------------- -- Structure de la table `table_stations` -- CREATE TABLE `table_stations` ( `id_stations` int(11) NOT NULL auto_increment, `nom_stations` varchar(255) NOT NULL default '', `id_villes` int(11) NOT NULL default '0', PRIMARY KEY (`id_stations`) ) ENGINE=MyISAM AUTO_INCREMENT=15 ; -- -- Contenu de la table `table_stations` -- INSERT INTO `table_stations` VALUES (1, 'Carrefour Université', 1); INSERT INTO `table_stations` VALUES (2, 'Carrefour Ollioules', 1); INSERT INTO `table_stations` VALUES (3, 'Carrefour Hyeres ZAC', 2); INSERT INTO `table_stations` VALUES (4, 'Carrefour Centre', 2); INSERT INTO `table_stations` VALUES (5, 'Esso', 3); INSERT INTO `table_stations` VALUES (6, 'Elf', 4); INSERT INTO `table_stations` VALUES (7, 'Leclerc ZI', 4); INSERT INTO `table_stations` VALUES (8, 'Carrefour ZI', 5); INSERT INTO `table_stations` VALUES (9, 'Leclerc ZAC', 5); INSERT INTO `table_stations` VALUES (10, 'Esso', 5); INSERT INTO `table_stations` VALUES (11, 'Avignon Carbu', 6); INSERT INTO `table_stations` VALUES (12, 'Carrefour', 6); INSERT INTO `table_stations` VALUES (13, 'Station Marché', 6); INSERT INTO `table_stations` VALUES (14, 'Uchaux Centre', 7);
listes.php
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
			var xhr = null; 
	 
			function getXhr(){
				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; 
				} 
			}
			
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				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('villes').innerHTML = leselect;
					}
				}

				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxLivre.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'departement
				sel = document.getElementById('departement');
				iddepartement = sel.options[sel.selectedIndex].value;
				xhr.send("iddepartement="+iddepartement);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Département</label>
				<select name='departement' id='departement' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
						mysql_connect("localhost","root","");
						mysql_select_db("sodicar");
						$res = mysql_query("SELECT * FROM table_departement ORDER BY nom_departement");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id_departement"]."'>".$row["nom_departement"]."</option>";
						}
					?>
				</select>
				<label>Villes</label>
				<div id='villes' style='display:inline'>
				<select name='villes'>
					<option value='-1'>Choisir une ville</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>
villes.php
<?php
	echo "<select name='villes' id='villes' onchange='affich(\"stations\",\"stations.php\",this.value)'>"; 
	if(isset($_POST["departement"])){
		mysql_connect("localhost","root","");
		mysql_select_db("sodicar");
		$res = mysql_query("SELECT * FROM table_villes 
			WHERE id_departement=".$_POST["departement"]." ORDER BY nom_villes");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id_villes"]."'>".$row["nom_villes"]."</option>";
		}
	}
	echo "</select>";
?>

stations.php
<?
    echo "<select name='stations'>"; 
    if(isset($_POST["id_villes"])){ 
        mysql_connect("localhost","root",""); 
        mysql_select_db("sodicar"); 
     $res = mysql_query("SELECT * FROM table_stations
            WHERE id_villes=".$_POST["id_villes"]." ORDER BY nom_stations");
                echo "<option value='0'>Aucune</option>"; 
        while($row = mysql_fetch_assoc($res)){
            echo "<option value='".$row["id_stations"]."'>".$row["nom_stations"]."</option>";
        }
    }
    echo "</select>";
?> 

Posté : 25 oct. 2006, 14:58
par Truc
Tu mélanges un peu les deux codes.

Tu as ce fichier "ajaxLivre.php"
xhr.open("POST","ajaxLivre.php",true);
il contient quoi ?

Tu fait appel à la fonction javascript affiche(...) mais tu n'en as pas, dans ton cas elle s'appel go().

Il faut doncmodifier cette fonction pour prendre en paramètre les données necéssaire à l'affichage.

Posté : 25 oct. 2006, 19:46
par franckycorp
Autant pour moi, je me suis trompé de fichier lors du post
Ma source est donc :

listes.php
<html>
	<head>
		<title>Test 3 listes</title>
		<script type='text/javascript'>
			var xhr = null; 
	 
			function getXhr(){
				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; 
				} 
			}
			
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function affich(nom_div_recep,page,valeur){
				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(nom_div_recep).innerHTML = leselect;
					}
				}
				// Ici on va voir comment faire du post
				xhr.open("POST",page,true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				xhr.send("envoiParam="+valeur);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 650px">
				<legend>Liste liées</legend>
				<label>Departement</label>
				<select name='departement' id='departement' onChange='affich("villes","villes.php",this.value)'> 
					<option value='-1'>Choisir un département</option>
					<?
						mysql_connect("localhost","root","");
						mysql_select_db("sodicar");
						$res = mysql_query("SELECT * FROM table_departement ORDER BY nom_departement");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id_departement"]."'>".$row["nom_departement"]."</option>";
						}
					?>
				</select>
				<label>Villes</label>
				<div id='villes' style='display:inline'>
				<select name='villes' id='villes' >
					<option value='-1'>Choisir une ville</option>
				</select>
				</div>
				<label>Stations</label>
				<div id='stations' style='display:inline'>
 				 <select name='stations' id='stations'>
        			<option value='0'>Choisir une station</option>                                
  				</select>
				</div> 
			</fieldset>
		</form>
	</body>
</html>

De plus j'ai trouvé pourquoi mes listes ne fonctionnaient pas j'avais oublier de retirer les simples cotes de :
document.getElementById(nom_div_recep).innerHTML = leselect;
Sous Internet Explorer les 3 listes fonctionnent très bien, en revanche sous Firefox, après avoir choisit une station, si je veux modifier le département ou la ville les listes deviennent blanches ou meme une option de la liste affiche une liste dedans et au clic cela devient blanc.
Que se passe t'il?

Posté : 25 oct. 2006, 19:53
par Truc
Tu as ça quelque part en ligne ?

Posté : 25 oct. 2006, 20:34
par Truc
Bon, ok dur dur avec tout ce code dans tous les sens MAIS le souci vient certainement des attributs "id".

Les "div" et "select" portent le même hors ils doivent être unique dans une page.

Posté : 25 oct. 2006, 21:11
par franckycorp
Ok je test ca et je met en ligne aussi....

Posté : 26 oct. 2006, 00:41
par franckycorp
Effectivement cela venait des id

Merci bien :wink: