[AJAX] liste deroulante avec Ajax
Bonjour a tous,
j'ai de petits soucis avec ajax. Je dois faire une liste deroulante contenant une liste de secteurs (cahque secteur contient des zones et chaque zones des sous-zones) de sorte que lorsque je selectionne un secteur de la liste le menu deroulant affichant les zones n'affiche que ces appartenant au secteur choisit et ainsi de suite.
Ce la marche bien pour secteur et zones mais lorsque je choisi une zone les sous-zones ne s'affichent pas.
voici les codes que j'utilise.
page test.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
|
<table id="maTable">
<tr class="tab_bg_2" id="commune">
<td align='left'>Secteurs: </td>
<td align='left'>
<select name="idSecteur" onChange="getZone(this.value)">
<?
$rek="select * from commune;";
$res =mysql_query($rek);
$listeC='<option value="0">------</option>';
while($table=mysql_fetch_array($res)){
$listeC.="<option value=".$table['id'].">".$table[commune]."(".$table[codeCommune].")"."</option>";
}
echo $listeC;
?>
</select>
</td>
</tr>
<tr class="tab_bg_2" id="zone">
<td align='left'>Zones: </td>
<td align='left'>
<select name="zones" onChange="getQuartier(this.value)">
<option value="0">Selectionnez d'abord un secteur</option>
</select>
</td>
</tr>
<tr class="tab_bg_2" id="tournee2">
<td align='left'>Tournées: </td>
<td align='left'>
<select name="tournees" onChange="getLots(this.value)">
<option value="0">Selectionnez d'abord une zone</option>
</select>
</td>
</tr>
</table> |
fichier file.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
|
//fournit la liste des zones pour un secteur donné
function getZone(id)
{
//id=document.getElementById('idSecteur').value; alert(id);
texte = file('http://localhost/html/site/script.php?a=zone&id='+escape(id));
var x=document.getElementById('maTable').rows;
var y=x[2].cells;
y[1].innerHTML= texte;
}
//la liste des tournées disponibles pour une zone donnée
function getTournees(id)
{
var idSecteur=document.getElementById('idSecteur').value;
texte = file('http://localhost/html/site/script.php?a=tournee&idSecteur='+escape(idSecteur)+'id='+escape(id));
var x=document.getElementById('maTable').rows;
var y=x[1].cells;
y[1].innerHTML= texte;
}
function file(fichier)
{
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);
xhr_object.open("GET", fichier, false);
xhr_object.send(null);
if(xhr_object.readyState == 4) return(xhr_object.responseText);
else return(false);
} |
le fichier script.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
|
$id=$_GET['id'];
$a=$_GET['a'];
if($a=="zone"){
$rek="select DISTINCT zones.codeZone from quartiers,commune,abonnes,zones where quartiers.id_commune=commune.id and commune.id='$id' and abonnes.id_quartiers=quartiers.id and zones.id_abonnes=abonnes.id;";
$res =mysql_query($rek);
$num=mysql_num_rows($res);
if($num){
$listeQ="<select><option value=\"0\">-----------</option>";
while($table=mysql_fetch_array($res)){
$listeQ.="<option value=".$table['codeZone'].">".$table[codeZone]."</option>";
}
echo $listeQ."</select>";
}
else echo 'aucun resultat';
}
if($a=="tournee"){
$idSecteur=$_GET['idSecteur'];
$rek="select DISTINCT tournees.codeTournees from quartiers,commune,abonnes,zones, tournees where quartiers.id_commune=commune.id and commune.id='$idSecteur' and abonnes.id_quartiers=quartiers.id and zones.id_abonnes=abonnes.id and tournees.id_zones=zones.id and zones.codeZone='$id';";
$res =mysql_query($rek);
$num=mysql_num_rows($res);
if($num){
$listeQ="<select>";
while($table=mysql_fetch_array($res)){
$listeQ.="<option value=".$table['codeTournees'].">".$table[codeTournees]."</option>";
}
echo $listeQ."</select>";
}
else echo 'aucun resultat';
} |
SVP j'ai besoin de votre aide.
Merci
