remplissage select en foncton d'un autre select

[hercull]

Bonjour,

Je rencontre un probleme en jquery, j'ai 3 select:

1)classe
2)matiere
3)chapitre

Le premier select est rempli en dur, et les deux autres sont vides.

Code :

       
                   <select id="classe" name="classe">

                               <option value="cm2">CM2</option>
                               <option value="cm1">CM1</option>
                               <option value="ce2">CE2</option>
                               <option value="ce1">CE1</option>
                               <option value="cp">CP</option>
                            </select>

                           <select id="matiere" name="matiere">
                               <option value="">Matiere</option>
                           </select>

                           <select id="chapitre" name="chapitre">
                               <option value="">Chapitre</option>
                           </select>

Je voudrai remplir le deuxième select en fonction de ce que l'utilisateur sélectionne dans le premier select, et remplir le 3eme select en fonction de ce que l'utilisateur sélectionne dans le deuxième select en récupérant les infos depuis la bdd.

Donc j’envoie ma variable et le nom de la fonction en ajax, je les récupère dans ma page php.

Code :

    
var matiere = $('#matiere').val();

       var chapitre = $('#chapitre').val();


       $('#classe').change(function ()
       {
           var classe = $('#classe').val();
           $.ajax(
                   {
                       url: 'jquery_verif.php',
                       type: 'POST',
                       dataType: 'html',
                       data: {'classe': classe, 'functionName': 'selectmatierefunction'},
                       beforeSend: function ()
                       {

                       },
                       success: function (data)
                       {
                         
                           console.log(data);

                           if (data === "true")
                           {
                               
                           } else if (data === "false")
                           {
                               
                           }
                       },
                       error: function ()
                       {
                           alert("Error function");
                       }
                   });
       });

Je fais ma requête sql , puis ma boucle while et je récupère les donner, seulement je n'arrive pas à les renvoyer, puis à remplir les select deux et trois.

Merci de votre aide.

[Xenos]

jQuery demande un retour sous forme JSON, donc il va te falloir renvoyer tes données dans ce format, pour les récupérer dans la variable "data" du success:

echo json_encode $myData; // ie: un array de données

PS: Le coup d'envoyer le nom de la fonction au serveur laisse penser à une grosse injection possible: le JS étant coté client, celui-ci peut l'altérer (ou bien envoyer une requête POST sans même passer par ton site) et mettre n'importe quelle valeur pour "functionName": il faut donc qu'elle soit bien vérifiée coté serveur avant d'être utilisée.

Pense à creuser du coté des tutos d'OpenClassroom car ce sont des problématiques hyper-courantes sur lesquelles tu tombes, donc tu gagneras du temps à chercher leur réponse qui existe déjà (après, cela fait des questions/réponses qui amènent du contenu de qualité sur jeuweb, car en Français, même si c'est assez "basique" du point de vue d'un pro)

[hercull]

Merci pour vos explications,

J'ai finis par réussir,

Le deuxième select se rempli bien en fonction de la sélection du premier select.

Seulement il ne supprime pas les données précédentes et, rajoute à la suite les nouvelles données lorsque je fais un nouveau choix dans mon premier select.

Comment faire pour qu'il supprime les données chargées précédentes pour n'afficher que les nouvelles?

Pour être plus clair:

select1 : choix 1

résultat :

select2 : 1,2,3,4


ensuite quand on change son choix dans le select1

select1 : choix 2

résultat :

select2 : 1,2,3,4,5,6,7,8

au lieu de :

select2 : 5,6,7,8

Voici le code :

Code :

       $('#classe').change(function ()

       {

           var classe = $('#classe').val();
           var $classe = $('#classe');
           var $matiere = $('#matiere');
           $.ajax({
               url: 'jquery_verif.php',
               type: 'POST',
               data: {'classe': classe, 'functionName': 'selectmatierefunction'},
               dataType: 'json',
               success: function (json) {
                   $.each(json, function (index, value) {

                       $("#matiere option[value='mat']").remove();
                       $matiere.append('<option value="' + index + '">' + value + '</option>');
                   });
               }
           });
        });

Merci

[Xenos]

Code :

$("#matiere option[value='mat']").remove();
$matiere.append('<option value="' + index + '">' + value + '</option>');

Si tu comprends ce que tu codes, tu devrais voir le problème.

PS: les variables "$xxx" en JS, je trouve cela peu lisible car se confondant avec des $.xxx