Utilisez un script pour mettre à jour une liste déroulante

Question

Hier, j'ai posé une question sur ce forum sur la façon de mettre à jour une liste déroulante HTML (liste de sélection) en fonction d'une autre liste déroulante. Malheureusement, ce n'était pas clair pour certains utilisateurs. Mais pas de problème, j'ai découvert comment ça marche. Alors, commençons par le script, je l'ai téléchargé sur pastebin: http://pastebin.com/sFhbPAFj

Quel est mon objectif?

Dans la première liste déroulante (lecturer_id), j'ai des noms de conférenciers et des ID. Cette information provient d'une base de données PostgreSQL. A titre d'exemple, une option façon dont la liste pourrait être:

X

La seconde liste devrait contenir les cours de la conférence enseigne. Un autre exemple:

Maths

Ces informations sont également en provenance de la base de données, mais il doit être dynamique. Comme si je sélectionnais le professeur Y, la deuxième liste devrait être mise à jour avec d'autres cours. Le problème est, je ne sais pas comment je pourrais transférer ces données de mon application PHP au script ci-dessus, et de l'autre côté, je ne sais pas comment je pourrais obtenir le lecturer_id du script jQuery dans mon code PHP. (J'ai besoin de cet identifiant pour remplir la liste avec les cours)

J'espère que ma question sera claire cette fois.

Answer 1

Vous pouvez utiliser la fonction jQuery ajax pour appeler la base de données avec l'ID de l'enseignant pour obtenir les cours et mettre à jour la deuxième liste déroulante.

Btw utilisateur jQuery pour tous vos javascript. instar d'utiliser for vous pouvez utiliser jQuery each.

Answer 2

préférable d'utiliser AJAX. Quelque chose comme:

$("#teacher_select").change(function(){ 
id = $(this).val(); 
$.ajax({ 
       type: "GET", 
       url: "some.php/?id=" + id, // perform a query for all courses taught by this teacher and return html 
       success: function(data){ 
          $("#course_select").html(data); 
          } 
      }); 
}); 

Vous pouvez également retourner un objet JSON et de faire la transition vers HTML sur le côté client (i.e. dans la fonction success), auquel cas ne pas oublier d'ajouter dataType:"json".

EDIT: pour récupérer les cours du premier professeur de la charge, il suffit d'utiliser la même ajax demande de répondre à l'onload événement - ou JQuery $(document).ready(); - qui vous procurera les cours du je serais professeur