[AJAX] Listes déroulantes liées
Bonjour,
j'ai trois listes déroulantes : entreprises, lieux (sites), projets.
Chacune d'elle est alimentée par requête SQL.
Quand on choisit une entreprise dans la première, les lieux correspondants se chargent dans la seconde et les projets correspondants à cette entreprise se charge dans la troisième. Lieux et projets n'ont donc aucun lien mais se chargent toutes les deux depuis la première liste.
Mon code :
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
|
<select id="entreprises" name="entreprises" onchange="this.form.submit();go2();">
<?php
$req = mysql_query("SELECT ...;");
while ($donnees = mysql_fetch_array($req))
{
$selected = (isset($_POST['...']) && $_POST['...'] == $donnees['id_societe'])? " selected":"";
echo '<option value="'.$donnees['id_societe'].'"'. $selected.'>'.$donnees['...'].'</option>';
}
?>
</select></td>
<td><div id="liste_projets" style="display:inline">
<select name="liste_projets">
</select>
</div></td>
<!-- Liste des lieux (aussi des sociétés) -->
<select name="site_projet">
<?php
$req = mysql_query("SELECT ...;");
while ($donnees = mysql_fetch_array($req))
{
$selected = (isset($_POST['...']) && $_POST['...'] == $donnees['id_societe'])? " selected":"";
echo '<option value="'.$donnees['id_societe'].'"'. $selected.'>'.$donnees['...'].'</option>';
}
?>
</select></td></tr> |
La seconde liste alimentée par une requête extérieure en Ajax :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
|
echo '<select name="liste_projets">';
if(isset($_POST['id_societe']))
{
$res = mysql_query("...;");
while($donnees = mysql_fetch_assoc($res))
{
echo '<option value="'.$donnees['nom_projet'].'">'.$donnees['nom_projet'].'</option>';
}
}
echo '</select>';
?> |
Et enfin mon code de la fonction go2(); qui permet de recharger ma dernière liste vue :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
function go2()
{
var xhr = getXhr();
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 à la liste
document.getElementById('liste_projets').innerHTML = leselect;
}
}
// récupération de la requête SQL pour afficher les projets liés à la société
xhr.open("POST","req_liste_proj.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// on poste l'id de la société comme argument
sel = document.getElementById('client_projet');
idsociete = sel.options[sel.selectedIndex].value;
xhr.send("id_societe="+idsociete);
} |
Mon problème (j'y arrive enfin) :
- lorsque je sélectionne une entreprise dans la première liste, mes deux autres listes se chargent avec les bonnes valeurs MAIS la liste des projets affiche le nom des projets à peine une seconde ! Je vois le nom du premier projet de la liste durant une seconde et hop, elle se vide !
Et ça je ne sais pas d'où ça vient, jamais rencontré le problème.
Donc si vous pouviez m'aider ... :D
