remplir un select avec un tableau de javascript

**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

Invité · 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.

Invité · 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);

Invité · 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

Invité · 08/08/2011, 16h24

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 ...

faire un deuxième select identique au premier

OU

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

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

ç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

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.

Invité · 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

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.

Invité · 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

Envoyé par bulldo

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

Ah...

Envoyé par bulldo

Code :

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

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

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

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

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);

Invité · 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é ...

remplir un select avec un tableau de javascript

JavaScript

Discussions similaires

Partager

Partager