Remplir un élément SELECT dynamiquement après sélection dans un menu déroulant

**hubchau** · 23/08/2012, 16h31

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 html :

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

<select id="myselect"></select>

Dont le contenu est peuplé par :

Code javascript :

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

$("#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 html :

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
<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 html :

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

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 html :

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

<select id="myselect2" onchange="if (this.selectedIndex) showEmployes();"></select>

et la fonction correspondante :

Code javascript :

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

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

**Golgotha** · 23/08/2012, 16h40

Bonjour,

je ne sais pas si j'ai bien tout suivi mais, tu pourrait utiliser ce que tu a fait pour la deuxième combo ?

Code :

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

1
2
3
4
function showEmployes()
			{
			$("#myselect3").jCombo("showEmployes.php?ville_id=", document.forms[0].myselect2.value; );
			}

**hubchau** · 23/08/2012, 17h18

Ahah c'était devant mon nez, et j'étais persuadé qu'il fallait que je fasse autrement !

Merci beaucoup

J'ai donc simplement ajouté cette ligne :

Code javascript :

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

$("#myselect3").jCombo("getEmployes.php?id=", { parent: "#myselect2" } );

Maintenant, ce que je souhaite pouvoir faire c'est sélectionner plusieurs employés de ma nouvelle liste et les envoyer dans une nouvelle liste (comme avec le plugin crossSelect sauf qu'il ne semble pas fonctionner dans mon cas)

Je suis sous IE8 et dans l'idéal, ca doit fonctionner sous tous les navigateurs.

**Golgotha** · 23/08/2012, 17h24

Peux tu utiliser jQuery ui selectable ?

**hubchau** · 23/08/2012, 17h27

Je peux dans le sens où c'est techniquement possible mais je ne suis pas sûr que ça réponde totalement à ce que je cherche, si ?

**dkmix** · 24/08/2012, 08h30

Bonjour,
Avec select2 ?
Perso je l'utiliserais à la place de jcombo et je referais la cascade, mais il est peut-être possible de l’utiliser pour "myselect3"

Il existe aussi : jQuery MultiSelect

Ou simplement avec l'attribut multiple : w3cSchools

**hubchau** · 24/08/2012, 09h23

Envoyé par dkmix

Bonjour,
Avec select2 ?
Perso je l'utiliserais à la place de jcombo et je referais la cascade, mais il est peut-être possible de l’utiliser pour "myselect3"

Il existe aussi : jQuery MultiSelect

Ces 2 plugins semblent très puissants et complets, je vais regarder ca plus en profondeur ! Merci

Envoyé par dkmix

Ou simplement avec l'attribut multiple : w3cSchools

J'utilise déjà l'attribut multiple sur myselect3. C'est l'envoi vers une autre liste qui me pose problème

Remplir un élément SELECT dynamiquement après sélection dans un menu déroulant

jQuery

Discussions similaires

Partager

Partager