Discussion :

[atomik29]

Bonjour à tous,

Je commence à coder avec Jquery depuis quelques jours et je me retrouve dans un cas qui doit être classique pour certains...

Je dois lier 4 listes déroulantes entres elles.
J'ai 4 divs avec 1 select dans chacune d'entre elles.

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="div_select_supcat">
 
<select id="select_select_supcat">
<option value='0'>S&eacute;lection super cat&eacute;gorie</option>
<?php
 
$result = mysql_query("SELECT id_supcat, nom_supcat FROM super_categories ORDER BY nom_supcat ASC");
 
while ($row = mysql_fetch_array($result, MYSQL_BOTH))
{
 echo "<option value='".$row["id_supcat"]."'>".$row["nom_supcat"]."</option>";
}
?>
</select>
</div>
<div id="div_select_cat"></div>
<div id="div_select_souscat"></div>
<div id="div_select_spec"></div>

Je fais un appel lorsque je sélectionne une valeur dans la première liste et je l'injecte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$("#select_select_supcat").change( function ()
{
    if(this.value != 0)
    {
         $.post("files/fonctions.php", { name: "select_cat", cat: "categories", valeur: this.value },
         function(data)
         {
             $("#div_select_cat").html(data);
          });
     }
});

Contenu de fonctions.php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
switch($_POST["name"])
{
     case "select_cat":
 
          switch($_POST["cat"])
          {
                 case "categories":
 
                      $result = mysql_query("SELECT id_cat, nom_cat FROM categories WHERE id_supcat=".$_POST["valeur"]."");
 
                       echo "<select id=\"select_select_cat\">";
                       echo "<option value='0'>S&eacute;lection cat&eacute;gorie</option>";
 
                       while ($row = mysql_fetch_array($result, MYSQL_BOTH))
                       {
                            echo "<option value='".$row["id_cat"]."'>".$row["nom_cat"]."</option>";
                       }
                       echo "</select>";
 
                    break;
 
                      ..............
}

Mais lorsque je sélectionne une valeur dans ma seconde liste je ne récupère plus la valeur de celle-ci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$("#select_select_cat").change( function ()
{
    alert(this.value);
});

Quelqu'un aurait-il une petite solution à mon problème, merci d'avance.

[marcha]

Salut,

A voir ton code je suppose que tu as assigné les évènements onchange
sur les listes lors de la création initiale de la page.

Hors, lors des mises à jours des listes tu injecte du html, ceci a pour effet
de remplacer les éléments DOM existants par de nouveaux. Tu perds ainsi
l'assignation des évènements.

Il faudrait que tu réassigne les évènements par un petit script que tu peux
générer depuis php après la balise </select>, par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
echo "<script type='text/javascript'>";
echo '$("#select_select_cat").change( doChangeCat );';
echo "</script>";