Bonjour à tous,

Je galère depuis pas mal de temps pour faire marcher une mise à jour en cascade de 3 listes déroulantes.

J'ai eu plusieurs personnes qui m'ont fait remanier mon code mais sans succés.

J'espère avoir plus de chance ici..

Voila ci-dessous une partie de la page contenant mon formulaire avec 4 listes déroulantes.
La première id='dpt' après selection déclenche des requêtes ajax qui mettent à jour 2 autres listes déroulante id="service_signalant" et id='theme'.

Tout cela fonctionne bien.

Par contre la liste déroulante id='theme' devrait déclencher après mise à jour une requête ajax pour mettre à jour la liste id='sous-theme'.

Et la ça ne marche pas.En mettant des alert dans le code il semblerait que l'action sur changement ne fonctionne pas.

Le formulaire
Code : 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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<tr>
      <th scope="row"><div align="left">Département signalant</div></th>
 
      <td><select name="dpt_signalant" id="dpt_signalant">
      <option value="ns" selected>Sélectionner le dpt</option>
      {section name=idx loop=$res_dpt}
        <option value="{$res_dpt[idx].dys_dpt_id}">{$res_dpt[idx].dys_dpt_nom}</option>
        {/section}
      </select>
      </td>
      <th><div align="left">Service signalant</div></th>
     <td><span id="maspanselectservice">
      <select name="service_signalant" id ="service_signalant" >
      <option value="ns" selected>Sélectionner le service</option>
          </select>
          </span>
         </td>
    </tr>
 
    <tr>
      <th scope="row"><div align="left">Thème</div></th>
      <td><span id="maspanselecttheme">
      <select name="theme" id="theme">
      <option value="ns" selected>Sélectionner le théme</option>
      <!--{section name=idx loop=$res_theme}
        <option value="{$res_theme[idx].dys_themes_theme}">{$res_theme[idx].dys_themes_theme}</option>
        {/section}-->
      </select>
      </span>
      </td>
 
   <th><div align="left">Sous_thème</div></th>
      <td><span id="maspanselectsous_theme">
      <select name="sous_theme" id="sous_theme">
      <option value="ns" selected>Sélectionner le sous-thème</option>
      <option value="so">Sans objet</option>
      </select>
      </span>
      </td>
    </tr>
un extrait de la page avec le code jquery

Code : 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
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
55
56
57
58
59
60
61
62
63
64
65
66
 
 $(document).ready(function(){
 
 
                $("#dpt_signalant").change(function(){ 
                           if($(this).val() != "ns"){
 
                               var dept = $(this).val();
 
                                $.ajax({
                                   url: "alim_services.php",
                                   global: false,
                                   type: "POST",
                                   data: "dpt="+dept,
                                   dataType: "html",
                                   success: function(msg){
                                  $("#maspanselectservice").empty();
                                     $("#maspanselectservice").html(msg);
 
 
 
                                      $.ajax({
                                   url: "alim_themes.php",
                                   global: false,
                                   type: "POST",
                                   data: "dpt="+dept,
                                   dataType: "html",
                                   success: function(msg){
                                    $("#maspanselecttheme").empty();
                                     $("#maspanselecttheme").html(msg);
                                 }});
 
 
 
 
 
                                 }
           }
        );
                       }
               });
 
                   $("#theme").change(function(){ 
                            alert("test");
                           if($(this).val() != "ns"){
 
                               var theme = $(this).val();
 
                                $.ajax({
                                   url: "alim_sous_themes.php",
                                   global: false,
                                   type: "POST",
                                   data: "theme="+theme,
                                   dataType: "html",
                                   success: function(msg){
                                     $("#maspanselectsous_theme").append(msg);
                                 }
           }
        );
                       }
               });
 
 
 
 
     });
Suivant les derniers conseil que j'ai eu on m'a tout fait mettre dans le même $(document).ready(function(), mais au début les différents appels était dans des $(document).ready(function() différents.

Je précise que la page php qui renvoie les infos pour la liste id='sous_theme' fonctionne bien.

Merci de vos suggestions