Remplir un élément SELECT dynamiquement après sélection dans un menu déroulant
Bonjour à tous,
mon sujet touche au html, au php, au javascript, à jQuery et à MySQL, donc je ne suis pas sûr de poster ça au bon endroit, veuillez m'en excuser d'avance :)
Je suis chargé de développer une page web. Cette page web doit permettre à un utilisateur de constituer une liste personnalisée de destinataires parmi une base existante pour leur envoyer un message.
Ma page affiche 2 menus déroulants : un correspondant à une premier niveau de hiérarchie de ma boite (ici Nord, Sud, etc.) , l'autre affichant un niveau inférieur (ville au sein d'une région : Paris, Lille, Marseille, Toulouse, etc.)
Donc, voilà où j'en suis actuellement :
Un premier élément SELECT :
Code:
<select id="myselect"></select>
Dont le contenu est peuplé par :
Code:
$("#myselect").jCombo("getNSEO.php");
où jCombo est un plugin jQuery permettant de remplir un menu déroulant depuis un fichier JSON et getNSEO.php est un fichier qui renvoie la version JSON de l'extraction d'une BDD MySQL.
Le second fait la même chose, mais avec un filtrage permettant de n'afficher que ce qu'il faut (n'afficher que Paris et Lille, etc. si on a sélectionné le Nord).
J'ai donc :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <html>
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.selectboxes.js" type="text/javascript"></script>
<script src="js/jquery.jCombo.js" type="text/javascript"></script>
</head>
<body>
<form>
<select id="myselect"></select>
<select id="myselect2"></select>
</form>
<script type="text/javascript">
$("#myselect").jCombo("getNSEO.php");
$("#myselect2").jCombo("getVille.php?id=", { parent: "#myselect" } );
</script>
</body>
</html> |
Jusqu'à présent, tout va bien.
Ce que je veux maintenant pouvoir faire, c'est lorsque que l'on choisit une ville de myselect2, s'affiche dans un 3e SELECT, la liste des personnes travaillant dans cette ville.
Code:
1
2
3
4
5
6
7
|
<select id="myselect3" size="8" multiple>
<option>Employé Nord Paris 1</option>
<option>Employé Nord Paris 2</option>
<option>Employé Nord Paris 3</option>
<option>Employé Nord Paris 4</option>
</select> |
J'ai déjà codé ceci :
Code:
<select id="myselect2" onchange="if (this.selectedIndex) showEmployes();"></select>
et la fonction correspondante :
Code:
1
2
3
4
5
| function showEmployes()
{
content=document.forms[0].myselect2.value;
alert("Vous avez choisi la ville numero : " + content);
} |
Je souhaiterai qu'à la place de l'alerte, mon élément myselect3 se remplisse tout seul comme un grand :) de la liste des employés de cette ville, obtenue dynamiquement via un fichier PHP/JSON.
Par la suite, il faudrait que ces valeurs soient sélectionnables et qu'on puisse les envoyer dans une autre SELECT afin de se créer une liste personnalisée et sauvegardable de gens.
Voilà, j'espère que mon post est assez clair ; je me débrouille pas trop mal en info, mais j'apprends JS, jQ, PHP et MySQL un peu sur le tas.
Merci d'avance pour tout coup de main :)
Hubert
