remplir un select avec un tableau de javascript [Résolu]

bulldo · 08/08/2011, 14h11

Salut !
J'ai un tableau en javascript et je veux remplir un select avec les éléments de mon tableau dynamique. j'ai pensé à faire une boucle for mais je ne sais pas si c'est possible et comment je peux le faire.
Est ce que vous pouvez me donner un exemple simple pour la syntaxe et merci d'avance

jreaux62 · 08/08/2011, 14h24

Bonjour,
à priori, ca doit correspondre : http://javascript.developpez.com/tut...ge=page_5#LV-B

bulldo · 08/08/2011, 14h57

merci pour le lien .
J'ai jeté un coup d'oeil et j'ai vu que tout le formulaire est fait avec javascript, alors que le mien est en html je veux seulement faire une boucle for pour "option" de mon select et mettre les éléments du mon tableau qui lui est fait avec javascript.

jreaux62 · 08/08/2011, 15h47

Au lieu de "jeté un coup d'oeil", garde-les ouverts et lis-le !
Tu verras que c'est exactement ce que tu cherches !

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
//création de l'élément select
var elSelect = document.createElement("select");	
//nombre d'éléments visibles
elSelect.size = "1";	
//Tableau contenant les options de la liste
var elOption = new Array(
                    new Option("Votre choix", "", false, false),
                    new Option("Option 1", "valeur1", false, false),
                    new Option("Option 2", "valeur2", false, false),
                    new Option("Option 3", "valeur3", false, false),
                    new Option("Option 4", "valeur4", false, false)
                          );

la boucle "for" se fera dans le script javascript.

bulldo · 08/08/2011, 15h57

j'ai essayé et je n'arrive pas à insérer mon select dans le formulaire déjà existant

Code :

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

1
2
var elForm = document.getElementById("myform");
insertAfter(elSelect,elForm.firstChild);

jreaux62 · 08/08/2011, 15h57

Si au moins tu nous donnais ton code ...

bulldo · 08/08/2011, 16h05

voilà tout le code :

je veux faire un deuxième select identique au premier qui va contenir les éléments qui seront ajoutés quand on appuie sur le bouton add

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="../media/js/jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript">
 
var dest=[];
function addtext() {
	var newtext = document.myform.groupesDispo.value;
	if (document.myform.outputtext.value.indexOf(newtext)!=-1) {
		document.myform.outputtext.value += "";
	}
	else{	
		document.myform.outputtext.value +=  newtext +";" ;
	}
 
	var listegroupe=document.myform.outputtext.value;
	var myStr = listegroupe.slice(0, -1);
	var dest = myStr.split(";");
	for(var i = 0;i<dest.length;i++){
		dest[i] = dest[i].split(",");
		alert(dest[i]);
	}
	alert(dest);
	return dest;
}
 
</script>
</head>
 
<form name="myform">
<table border="0"  cellpadding="0" cellspacing="5">
	<tr align="center">
		<td width="49%">
		<br/><br/><br/><br/><br/><br/><br/><br/>
		<select id="groupesDispo" size="10" name="groupesDispo" style="width: 200px;"   >
           	    <option value="Administrateur">Administrateur</option>
                    <option value="Affiliés">Affiliés</option>
		    <option value="Annonceurs">Annonceurs</option>
                    <option value="Commerciaux">Commerciaux</option>
		    <option value="Trafic managers">Trafic managers</option>
		    <option value="Support Technique / Problèmes">Support Technique / Problèmes</option>
		    <option value="Prospection - Call - Center">Prospection - Call Center</option>	
		</select>
		</td>
 
		<td>
			<input type="button" id="mybutton" name="mybutton" value="Add" onClick="addtext();"></p>
		</td>
 
		<td width="49%">
			<br/><br/><br/><br/><br/><br/><br/><br/>
 
		<script language="javascript" type="text/javascript">
			var elSelect = document.createElement("select");	
			//nombre d'éléments visibles
			elSelect.size = "1";	
 
			new Option("Text","Value", "defaultSelected true / false", "selected true / false");
			var elOption = new Array(
                           new Option("Votre choix", "", false, false),
                           new Option("Option 1", "valeur1", false, false),
                           new Option("Option 2", "valeur2", false, false),
                           new Option("Option 3", "valeur3", false, false),
                           new Option("Option 4", "valeur4", false, false)
                       );
			//Appel des objets formulaire et bouton
			var elForm = document.getElementById("myform");
			insertAfter(elSelect,elForm.firstChild);
 
			//Ajout dans le select des options (1)
			for (i=0;i<elOption.length;i++){
				elSelect.options.add(elOption[i]);
			}
		</script>
		</td>
	</tr></table>
</form>
</body>
</html>

Bovino · 08/08/2011, 16h18

Code :

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

insertAfter(elSelect,elForm.firstChild);

et ça sort d'où insertAfter() ???
Il ne suffit pas d'inventer un nom de fonction pour qu'elle s'implémente toute seule

EDIT :
Ah aussi

Code :

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

<script type="text/javascript" src="../media/js/jquery-1.5.1.min.js"></script>

ça te sert à quoi jQuery ? C'est au cas où ta page se chargerait trop vite ?

bulldo · 08/08/2011, 16h24

oui je me suis trompée mais même le insertBefore ne marche pas

jreaux62 · 08/08/2011, 16h24

Citation:

Envoyé par bulldo

je veux faire un deuxième select identique au premier qui va contenir les éléments qui seront ajoutés quand on appuie sur le bouton add

Il faut vraiment que tu saches exprimer CLAIREMENT ce que tu veux ...

Citation:

faire un deuxième select identique au premier

OU

Citation:

faire un deuxième select qui NE va contenir QUE les éléments (du 1er select) qui seront ajoutés quand on appuie sur le bouton add

Je suppose que c'est cette 2ème citation qui convient ?

Bovino · 08/08/2011, 16h25

Citation:

Envoyé par bulldo

même le insertBefore ne marche pas

Ben... si tu l'utilises comme tu utilisais insertAfter(), rien d'étonnant : tu ne respectes pas la syntaxe...

bulldo · 08/08/2011, 16h36

Citation:

ça te sert à quoi jQuery ? C'est au cas où ta page se chargerait trop vite ?

C'est parce que j'ai besoin de ça pour la suite ...
Tant mieux si ça vous fait rire et merci pour votre aide vous êtes vraiment sympas

Citation:

Je suppose que c'est cette 2ème citation qui convient ?

oui c'est la deuxième,("identique" pour la forme), le 2ème select doit être vide au début et se remplira quand on sélectionne un élément du 1er select.

jreaux62 · 08/08/2011, 16h41

Je me doutais bien qu'on était en train de construire une usine à gaz ...

Je pense qu'en réfléchissant un peu, on trouvera une solution plus simple ...

Bovino · 08/08/2011, 16h41

Citation:

Envoyé par bulldo

C'est parce que j'ai besoin de ça pour la suite ...
Tant mieux si ça vous fait rire et merci pour votre aide vous êtes vraiment sympas

La remarque est surtout là pour te faire remarquer que tant qu'à utiliser jQuery, le mieux est de l'utiliser jusqu'au bout

Toutes les méthodes d'insertion dans le DOM sont correctement gérées en interne par jQuery.
Bon, ensuite, apprendre comment on fait "en vrai" avec JavaScript est toujours une bonne (meilleure) approche !

bulldo · 08/08/2011, 16h53

merci pour la remarque mais mon problème n'est pas le choix entre JQuery et Javascript et puis pour l'utilisation d'insertBefore je n'ai rien inventé j'ai utilisé la même syntaxe du tuto.

jreaux62 · 08/08/2011, 16h54

Puisqu'on parle de jquery, on avait fait un truc dans le genre ici.
Il s'agissait de remplir un textarea, mais je pense qu'il suffit d'une "petite" (ou grosse ?) modification pour ajouter des options à un select.

(le problème, c'est que je parle mieux japonais que jquery ...)

Bovino · 08/08/2011, 17h00

Citation:

Envoyé par bulldo

pour l'utilisation d'insertBefore je n'ai rien inventé j'ai utilisé la même syntaxe du tuto.

Ah...

Citation:

Envoyé par bulldo

Code :

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

1
2
var elForm = document.getElementById("myform");
insertAfter(elSelect,elForm.firstChild);

Citation:

Envoyé par tuto

Code :

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

1
2
3
4
var elForm = document.getElementById("idFormulaire");
var objBouton = document.getElementById("idBouton");
...	
elForm.insertBefore(elTxt[0], objBouton);

Pour moi, ça ne se ressemble pas tout à fait...

bulldo · 08/08/2011, 17h03

Citation:

Ben... si tu l'utilises comme tu utilisais insertAfter(), rien d'étonnant : tu ne respectes pas la syntaxe...

donc ça c'est faux?

Code :

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

elForm.insertBefore(elSelect, objBouton);	//Ajout du select

NoSmoking · 08/08/2011, 23h27

Citation:

Envoyé par bulldo

donc ça c'est faux?

Code :

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

elForm.insertBefore(elSelect, objBouton);	//Ajout du select

ici la méthode insertBefore est appliqué à elForm alors que dans

Code :

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

insertAfter(elSelect,elForm.firstChild);

même si la méthode est définie, on ne sait à quel élément elle s'applique...

Code :

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

Element.insertAfter(elSelect,elForm.firstChild);

jreaux62 · 09/08/2011, 08h46

Un code qui fonctionne : (suffisamment commenté, je pense)

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!doctype html>
<html lang="fr">
<head>
	<title>Test</title>
	<!-- initialisation jquery -->
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script>
	$(function() {
		/* AJOUTER des options dans la 2eme liste a partir de la 1ere liste / SUPPRIMER des options */
 
		// AJOUTER par clic sur bouton "add"
		$("#idbtadd").click(function () {
			var opt_val = $('#idgroupesDispo option:selected').val(); // valeur
			var opt_txt = $('#idgroupesDispo option:selected').text(); // texte
			if(opt_val!='' && opt_val!=0 && opt_val!=null){
				// option deja existante dans le select ?
				var is_val = $('#idgroupesAdd').find('option:contains('+opt_txt+')').val();
				var is_txt = $('#idgroupesAdd').find('option:contains('+opt_txt+')').text();
				if(is_val!=opt_val && is_txt!=opt_txt) { // (on ne veut pas ajouter 2 fois la meme option)
					// ajout de l'option dans le select
					$('<option>').val(opt_val).text( opt_txt).appendTo('#idgroupesAdd');
					// ou
					//$('#idgroupesDispo option:selected').clone().appendTo($('#idgroupesAdd'));
				}
			}
		});
		// SUPPRIMER par clic sur bouton "del"
		$("#idbtdel").click(function () {
			//var opt_val = $('#idgroupesAdd option:selected').val(); // valeur
			var opt_txt = $('#idgroupesAdd option:selected').text(); // texte
			// suppression de l'option existante dans le select
			$('#idgroupesAdd').find('option:contains('+opt_txt+')').remove()
		});
 
 
		// AJOUTER par double-clic sur 1ere liste
		$("#idgroupesDispo").dblclick(function () {
			var opt_val = $('#idgroupesDispo option:selected').val(); // valeur
			var opt_txt = $('#idgroupesDispo option:selected').text(); // texte
			if(opt_val!='' && opt_val!=0 && opt_val!=null){
				// option deja existante dans le select ?
				var is_val = $('#idgroupesAdd').find('option:contains('+opt_txt+')').val();
				var is_txt = $('#idgroupesAdd').find('option:contains('+opt_txt+')').text();
				if(is_val!=opt_val && is_txt!=opt_txt) { // (on ne veut pas ajouter 2 fois la meme option)
					// ajout de l'option dans le select
					$('<option>').val(opt_val).text( opt_txt).appendTo('#idgroupesAdd');
					// ou
					//$('#idgroupesDispo option:selected').clone().appendTo($('#idgroupesAdd'));
				}
			}
		});
		// SUPPRIMER par double-clic sur 2eme liste
		$("#idgroupesAdd").dblclick(function () {
			//var opt_val = $('#idgroupesAdd option:selected').val(); // valeur
			var opt_txt = $('#idgroupesAdd option:selected').text(); // texte
			// suppression de l'option existante dans le select
			$('#idgroupesAdd').find('option:contains('+opt_txt+')').remove()
		});
 
	});
	</script>
 
</head>
<body>
 
	<table>
		<tr>
			<td>
				<!-- 1ere liste - TEST -->
				<select id="idgroupesDispo" name="groupesDispo" size="10" style="width:200px;">
					<option value="1">Administrateur</option>
					<option value="2">Support Technique</option>
					<option value="3">Annonceurs</option>
					<option value="4">Commerciaux</option>
					<option value="5">Trafic managers</option>
					<option value="6">Prospection</option>	
				</select>
			</td>
			<td>
				<!-- 2eme liste -->
				<select id="idgroupesAdd" name="groupesAdd" size="10" style="width:200px;">
				</select>
			</td>
		</tr>
		<tr>
			<td>
				<button id="idbtadd" name="btadd">add</button>
			</td>
			<td>
				<button id="idbtdel" name="btdel">del</button>
			</td>
		</tr>
	</table>
 
</body>
</html>

[Edit] Code corrigé ...

08/08/2011, 14h11	#1
bulldo Futur Membre du Club Inscription : juillet 2010 Messages : 98 Détails du profil Informations forums : Inscription : juillet 2010 Messages : 98 Points : 19 Points : 19	remplir un select avec un tableau de javascript Salut ! J'ai un tableau en javascript et je veux remplir un select avec les éléments de mon tableau dynamique. j'ai pensé à faire une boucle for mais je ne sais pas si c'est possible et comment je peux le faire. Est ce que vous pouvez me donner un exemple simple pour la syntaxe et merci d'avance
	00

08/08/2011, 14h24	#2
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	Bonjour, à priori, ca doit correspondre : http://javascript.developpez.com/tut...ge=page_5#LV-B __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

08/08/2011, 15h57	#6
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	Si au moins tu nous donnais ton code ... __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

08/08/2011, 16h18	#8
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 797 Points : 35 797	Code : Sélectionner tout - Visualiser dans une fenêtre à part insertAfter(elSelect,elForm.firstChild); et ça sort d'où insertAfter() ??? Il ne suffit pas d'inventer un nom de fonction pour qu'elle s'implémente toute seule EDIT : Ah aussi Code : Sélectionner tout - Visualiser dans une fenêtre à part <script type="text/javascript" src="../media/js/jquery-1.5.1.min.js"></script> ça te sert à quoi jQuery ? C'est au cas où ta page se chargerait trop vite ? __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

08/08/2011, 16h41	#13
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	Je me doutais bien qu'on était en train de construire une usine à gaz ... Je pense qu'en réfléchissant un peu, on trouvera une solution plus simple ... __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

08/08/2011, 14h57	#3
bulldo Futur Membre du Club Inscription : juillet 2010 Messages : 98 Détails du profil Informations forums : Inscription : juillet 2010 Messages : 98 Points : 19 Points : 19	merci pour le lien . J'ai jeté un coup d'oeil et j'ai vu que tout le formulaire est fait avec javascript, alors que le mien est en html je veux seulement faire une boucle for pour "option" de mon select et mettre les éléments du mon tableau qui lui est fait avec javascript.
	00

08/08/2011, 16h24	#9
bulldo Futur Membre du Club Inscription : juillet 2010 Messages : 98 Détails du profil Informations forums : Inscription : juillet 2010 Messages : 98 Points : 19 Points : 19	oui je me suis trompée mais même le insertBefore ne marche pas
	00

08/08/2011, 16h53	#15
bulldo Futur Membre du Club Inscription : juillet 2010 Messages : 98 Détails du profil Informations forums : Inscription : juillet 2010 Messages : 98 Points : 19 Points : 19	merci pour la remarque mais mon problème n'est pas le choix entre JQuery et Javascript et puis pour l'utilisation d'insertBefore je n'ai rien inventé j'ai utilisé la même syntaxe du tuto.
	00

08/08/2011, 16h54	#16
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	Puisqu'on parle de jquery, on avait fait un truc dans le genre ici. Il s'agissait de remplir un textarea, mais je pense qu'il suffit d'une "petite" (ou grosse ?) modification pour ajouter des options à un select. (le problème, c'est que je parle mieux japonais que jquery ...) __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email