[AJAX] Listes liées - récupérer valeur 2° liste

Bonjour,

J'ai suivi le tuto de siddh pour créer des listes liées: http://dispatch-lesite.fr/resa/choix.php
Lors du choix d'un département, la liste des villes est construite.

Ma question est: comment récupérer la valeur de la ville sélectionnée afin de pouvoir utiliser à nouveau XHR pour appeler une autre page php?

En effet les listes de ville étant créées dans un div, je ne peux pas via Javascript récupérer leur valeur afin de m'en servir dans une fonction.

Code de choix.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<form method="post" name="form">
  <table width="550px" class="tahoma">
    <tr align="center" style="font-weight:bold;">
       <td bgcolor="#ff5050">Point de d&eacute;part</td>
       <td bgcolor="#ff5050">Point de destination</td>
    </tr>
    <tr>
        <td>D&eacute;partement</td>
        <td>D&eacute;partement</td>
    </tr>
    <tr>
        <td><?php liste_dept_dep(); ?></td>
        <td><?php liste_dept_dest(); ?></td>
    </tr>
    <tr>
        <td><div id="div_ville_dep" style="display:inline"></div></td>
        <td><div id="div_ville_dest" style="display:inline"></div></td>
    </tr>
<table>
</form>

Code de fonctions.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
function liste_dept_dep()
{
	connect_bdd();
	$query="select * from resa_dept order by id asc";
	$req=mysql_query($query) or die("Pb lors de la récupération des départements".mysql_error());
	echo "<select name='dept_dep' id='dept_dep' onchange='ville_depart()'>";
	echo "<option value=0>Choisissez un d&eacute;partement</option>";
	while($res=mysql_fetch_array($req))
	{
		echo "<option value=".$res['nom_bdd'].">".$res['id']." - ".utf8_encode($res['nom'])."</option>";
	}
}
 
function liste_dept_dest()
{
	connect_bdd();
	$query="select * from resa_dept order by id asc";
	$req=mysql_query($query) or die("Pb lors de la récupération des départements".mysql_error());
	echo "<select name='dept_dest' id='dept_dest' onchange='ville_destination()'>";
	echo "<option value=0>Choisissez un d&eacute;partement</option>";
	while($res=mysql_fetch_array($req))
	{
		echo "<option value=".$res['nom_bdd'].">".$res['id']." - ".utf8_encode($res['nom'])."</option>";
	}
}
 
function liste_ville_dep($dept)
{
	connect_bdd();
	$query="select code_postal, nom from ".$dept." order by nom";
	$req=mysql_query($query) or die("Pb lors de la récupération des villes".mysql_error());
	echo "Ville<br />";
	echo "<select name='ville_dep' id='ville_dep'  onchange='liste_delai()'>";
	echo "<option value=0>Choisissez une ville</option>";
	while($res=mysql_fetch_array($req))
	{
		echo "<option value=".$res['code_postal'].">".utf8_encode($res['nom'])."</option>";
	}
	echo "</select>";
}

Code de script.js:

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
function ville_depart()
{
	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)
	{
		leselect = xhr.responseText;
		// On se sert de innerHTML pour rajouter les options a la liste
		document.getElementById('div_ville_dep').innerHTML = leselect;
	}
}
	// Ici on va voir comment faire du post
	xhr.open("POST","ville_dep.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
	sel = document.getElementById('dept_dep');
	dept = sel.options[sel.selectedIndex].value;
	//envoi des parametres
	xhr.send("dept_dep="+dept);
}
 
function ville_destination()
{
	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)
	{
		leselect = xhr.responseText;
		// On se sert de innerHTML pour rajouter les options a la liste
		document.getElementById('div_ville_dest').innerHTML = leselect;
	}
}
	// Ici on va voir comment faire du post
	xhr.open("POST","ville_dest.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
	sel = document.getElementById('dept_dest');
	dept = sel.options[sel.selectedIndex].value;
	//envoi des parametres
	xhr.send("dept_dest="+dept);
}

Code de ville_dep.php

Code:

1
2
3
<?php 
        liste_ville_dep($_POST['dept_dep']);
?>

Code de ville_dest.php

Code:

1
2
3
<?php 
        liste_ville_dest($_POST['dept_dest']);
?>