les <select> avec jQuery ajax

**nigella** · 19/12/2011, 15h18

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

**Bovino** · 19/12/2011, 15h50

Code :

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

$('#selectModeles option').click(function(){...}

Au moment où ce code est interprété, les options n'existent pas, donc aucun événement ne leur est associé...

D'autre part, l'événement click n'est pas reconnu pour les balises option sur tous les navigateurs, il faut passer par l'événement change des balises select.

**nigella** · 19/12/2011, 16h10

merci pour ta réponse.

si j'ai bien compris je ne peux pas faire plus de 2 listes déroulantes par cette méthode.

**Bovino** · 19/12/2011, 16h12

Si, en s'adaptant un peu...
Tu peux utiliser la délégation d'événements par exemple, avec delegate().

**nigella** · 19/12/2011, 16h21

Je suis débutant en jQuery (en dev en général), je vais regarder comment fonctionne cet événement.

Merci encore, je donnerai des nouvelles sur la suite.

les <select> avec jQuery ajax

jQuery

Discussions similaires

Partager

Partager