[AJAX] Listes déroulantes liées

Bonjour,

J'ai un petit problème avec deux liste déroulante. j'ai utilisé le tuto disponible sur ce site.
Liste 1 Maille :
- 1 Semaine
- 2 Mois
- 3 Année
Liste 2 Période:
- S1, S2, S3, S3, ...
- Janvier, févrieer, Mars, ...

Voici le code que j'utilise pour la partie AJAX:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function getXhr()
			{
				var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
							xhr = new ActiveXObject("Msxml2.XMLHTTP");
						} catch (e) {
							xhr = new ActiveXObject("Microsoft.XMLHTTP");
						}
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
				return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function getPeriodes()
			{
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						listePeriodes = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('Periodes').innerHTML = listePeriodes;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ListePeriodes.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('Maille');
				idMaille = sel.options[sel.selectedIndex].id;
				xhr.send("idMaille="+idMaille);
			}

Voici le code php pour générer la page HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
echo "<form action='Integration.php' method=post>";
echo '<Table border ="0" title ="intégration" width ="100%">';
echo '<tr align="center" ><H3> Intégration des données</H3></tr>';
echo '<fieldset style="width: 500px">';
echo '<tr ><td>Maille</td>  ';
echo '<td>';
	echo '<div>';
		$sql ="SELECT     IDMaille AS IdMaille, Maille AS Maille FROM T_Mailles;";
		echo creer_select ("Maille", $sql, "Maille", 1, '','getPeriodes()', false);
	echo '</div>';
	echo '<td>Période</td>  ';
	echo '<td>';
	echo '<div id="Periodes">';
		echo '<select name="listePeriodes" id="listePeriodes">';
		//echo '<option selected>Séléctionnez d\'abord une Maille</option>';
		//echo '<!--Insertion des données AJAX concernant les periodes-->';
		echo '</select>';
	echo '</div>';
echo '</td>';
echo '</Table>';
echo '</form>';

et enfin voici la page listPeriodes.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
require_once ("DataConnect.php");
require_once ("ConnexionBd.php");
require_once("CreListe_Events.php");
 
$sql = "SELECT Période, Désignation FROM T_Périodes WHERE IDMaille=".$_POST["Maille"]." ORDER BY Période";
echo creer_select ("ListePeriodes", $sql, "ListePeriodes", '', '','', false);
 
 
	//$sql ='select Période, Désignation, IDMaille from T_Périodes where IDmaille = 1 order by Période ';
	//echo creer_select ("Période", $sql, "Période", '', '','', false);
 
?>

Le problème c'est que qu'on je sélectionner un élément de la liste Maille, la liste période disparait :(:(
Si quelqu'un a une idée
Merci d'avance pour toute aide