[AJAX] Comment faire deux listes déroulantes avec AJAX ou javascript

Bonjour je suis entrain de developper un site, je suis sur la création d’un formulaire ayant deux liste déroulante liée avec AJAX(j’ai une liste de la ville avec une tablee dans la base de donnée et une liste arrondissement avec une table dans la BDD), je sélectionne un titre dans la liste VILLE après les noms des arrondisssements apparaissent dans la liste ARRONDISSEMENT. En fait jai 3 fichier : index.php, fonction.js et traitement.php
Voici la partie du formulaire
Index.php

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
     <span style="font-size: 13px; font-weight: bold; font-family: Tahoma;">La Ville:</span>&nbsp;</p>
 
         <select name="ville" id="ville" onchange="Departements(this.value);" >
  <option value="vide">-Choisissez votre ville-</option>       
 
	<?php 
 
try
{
	$bdd = new PDO('mysql:host=localhost;dbname=hotel', 'root', '');
}
catch (Exception $e)
{
        die('Erreur : ' . $e->getMessage());
}
 
$reponse = $bdd->query('SELECT vile FROM nomville');			 
 while($back = $reponse->fetch())  { 
 
 echo '<option value="'.$back['vile'].'"';
	    if(isset($_POST["ville"]) && $_POST["ville"]==$back['vile']){echo " selected";}
	    echo '>'.$back['vile'].'</option>';
 
 
     }
	 ?>
          </select>
 
        &nbsp;<br> <br>
 
 <span style="font-size: 13px; font-weight: bold; font-family: Tahoma;">L'arrondissement:</span>&nbsp;</p>
  <div id="blocDepartements">
	<?php
	if(isset($_POST['ville']))
                 {
            $include= 1;
	include('traitement.php');
              }
	?>
	</div>

Voici la page de Jquery que j’ai nommé fonction.js, il y se trouve une fonction nommé Departements() :

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
46
47
48
49
50
51
52
 
function Departements(id)
	{
		function objet_XMLHttpRequest()
	{
	    var xhr = null;
 
    if (window.XMLHttpRequest || window.ActiveXObject){
	        if(window.ActiveXObject){
	            try{
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            }
	            catch(e){
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
	        }
	        else{
            xhr = new XMLHttpRequest();
        }
	    }
	    else{
	        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
	        return null;
	    }
	    return xhr;	
		}
 
 
 
	    //On déclare un objet
	    var objet1 = objet_XMLHttpRequest();
 
	    //On défini ce qu'on va faire quand on aura la réponse
	    objet1.onreadystatechange = function(){
	        //On ne fait quelque chose que si on a tout reçu et que le serveur est ok
	        if(objet1.readyState == 4 && objet1.status == 200){
	            //On envoie la réponse dans le div "blocDepartements"
	            document.getElementById('blocDepartements').innerHTML = objet1.responseText;
	        }
	        //côté ajax ça merde
	        else{
	            //on contrôle le statut. Si 404, le fichier ouvert par "open" n'existe pas
	            if(objet1.status == 404){
	                alert('Erreur ' +objet1.status + '! Le fichier php semble être absent...');
            }
	        }
	    }
	    //Ouverture : méthode, fichier, mode (true=asynchrone | false=synchrone)
	    objet1.open("POST", "traitement.php" , true);
	    objet1.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	    //envoie
	    objet1.send("ville=" + id);

Voici le fichier traitement.php, j’y ai mis le contenu de la 2ième liste qui doit apparaitre une fois que j’ai sélectionné un titre dans la 1ière liste

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
46
47
48
49
50
51
52
53
54
	<?php 
if(isset($_POST["ville"]) && $_POST["ville"] != 'vide')
{
 
 if(!isset($include)){
	//On indique le Content-Type utilisé
 header('Content-Type: text/html; charset="iso-8859-1"');
 
 
 try
{
	$bdd = new PDO('mysql:host=localhost;dbname=hotel', 'root', '');
}
catch (Exception $e)
{
        die('Erreur : ' . $e->getMessage());
}	
 
echo '<div id="reponse">La variable $_POST["ville"] provient d\'AJAX.</div>';
	}
	else{
	echo '<div id="reponse">La variable $_POST["ville"] provient de l\'include.</div>';
 
 
}
 
 
}
?>
<label>L'arrondissement : </label>
	<select name="villes" id="villes">
	<option value="vide">-Choisissez l'arrondissement-</option>
	<?php
	try
{
	$bdd = new PDO('mysql:host=localhost;dbname=hotel', 'root', '');
}
catch (Exception $e)
{
        die('Erreur : ' . $e->getMessage());
}	
 
 
	$quer= $bdd->query('SELECT arrond FROM villes  WHERE ville==\'' .$_POST['ville']. '\'');
 
	//On boucle
	while($famille = $quer->fetch())
	{
	echo '<option value="'.$famille['arrond'].'"';
	if(isset($_POST["villes"]) && $_POST["villes"]==$famille['arrond']){ echo " selected"; }
	echo '>'.$famille['arrond'].'</option>';
	}
	?>
	</select><br/>

Au cours de l’execution je ne décèle aucune erreur mais pourtant quand je lance l’execution du site la barre de la liste VILLLE apparait mais celle de la liste ARRONDISSEMENT n’apparaisse pas, par la suite je sélectionne un titre dans la 1ière liste mais rien ne se passe toujours, aucun changmeent au niveau de la liste ARRONDISSEMENT.

Pouvez-vous s’il vous plait m’aidez, me dire ce qui ne va pas dans mon code où un moyen plus simple pour créer deux listes deroulantes liées, car cela fait pratiquement 1 semaine que je suis dessus