salut à tous

J’essaie de créer une page html/php avec 3 <select>. le premier est rempli d'avance et le second est rempli en fonction du choix du premier. et le troisième se rempli en fonction du choix du deuxième.

Tout ça en jQuery/ajax. Mon problème est que j'arrive à charger le deuxième <select> après mon choix dans le premier, mais pas le troisième après mon choix sur le deuxième.

voici mon code :
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
 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script src="js/jquery-ui/js/jquery-1.6.2.min.js"></script>
        <script src="js/fonctions.js"></script>
    </head>
    <body>
        <?php
            $nom = 'El aouad Lahcen';
        ?>
        <form action="resultat.php" method="post">
 
                        <select id="selectMarques" name="marque">
                            <option selected id="0">Selection</option>
                            <option id="1">Citroën</option>
                            <option id="2">Renault</option>
                        </select>
 
                        <select id="selectModeles" name="modele">
                            <option selected>Selection</option>
                        </select>
            <select id="selectVersions">
                <option selected>Selection</option>
            </select>
    </body>
</html>
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
 
<?php
 
    
    if(isset($_POST['idMarque'])){
        
        $idMarque = $_POST['idMarque'];
        echo '<option selected>Selection</option>';
        switch ($idMarque){
        case 1:
            $html .= '<option id=1>C4</option>';
            $html .= '<option id=2>C3</option>';
            break;
         case 2:
            $html = '<option id=3>Clio</option>';
            $html .= '<option id=4>Megane</option>';
            break;       
        }
        echo $html;
                
    }
    if(isset($_POST['idModele'])){
        
        $idModele = $_POST['idModele'];
        echo '<option selected>Selection</option>';
        switch ($idModele){
        case 1:
            $html = '<option id=1>picasso</option>';
            $html .= '<option id=2>grand picasso</option>';
            break;
        case 2:
            $html = '<option id=1>entreprise</option>';
            $html .= '<option id=2>pluriel</option>';
            break;       
        
        case 3:
            $html = '<option id=1>1.9D</option>';
            $html .= '<option id=2>1.9DCI</option>';
            break;       
        
        case 4:
            $html = '<option id=1>coupée</option>';
            $html .= '<option id=2>classic</option>';
            break;       
        
        
        echo $html;
       }         
    }  
  
                         
?>
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
 
$(document).ready(function(){
    $('#selectMarques option').click(function(){
        var id = $(this).attr('id');
 
        $.ajax({
            type:'post',
            url:'monAjax.php',
            data:'idMarque='+id,
 
            success:function(data){
                //alert(data);
                $('#selectModeles').html(data);
            }
        });
 
    });
 
    $('#selectModeles option').click(function(){
        var id = $(this).attr('id');
 
        $.ajax({
            type:'post',
            url:'monAjax.php',
            data:'idModele='+id,
 
            success:function(data){
                //alert(data);
                $('#selectVersions').html(data);
            }
        });
 
    });           
});
merci d'avance