remplir un select avec un tableau de javascript

Version imprimable

08/08/2011, 14h11
bulldo

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
08/08/2011, 14h24
Invité

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

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.

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:

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.

08/08/2011, 15h57
bulldo
j'ai essayé et je n'arrive pas à insérer mon select dans le formulaire déjà existant
Code:

1 2 var elForm = document.getElementById("myform"); insertAfter(elSelect,elForm.firstChild);
08/08/2011, 15h57
Invité

Si au moins tu nous donnais ton code ...

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:

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>

08/08/2011, 16h18
Bovino

:no:

Code:

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

EDIT :
Ah aussi

Code:

<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 ? :mouarf:
08/08/2011, 16h24
bulldo

:oops: oui je me suis trompée mais même le insertBefore ne marche pas
08/08/2011, 16h24
Invité

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 ?
08/08/2011, 16h25
Bovino

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...
08/08/2011, 16h36
bulldo

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.
08/08/2011, 16h41
Invité

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 ...
08/08/2011, 16h41
Bovino

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 !
08/08/2011, 16h53
bulldo

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.
08/08/2011, 16h54
Invité

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 ...)
08/08/2011, 17h00
Bovino
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:

1 2 var elForm = document.getElementById("myform"); insertAfter(elSelect,elForm.firstChild);
Citation:
Envoyé par tuto

Code:

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...
08/08/2011, 17h03
bulldo

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:

elForm.insertBefore(elSelect, objBouton); //Ajout du select
08/08/2011, 23h27
NoSmoking

Citation:

Envoyé par bulldo

donc ça c'est faux?

Code:

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

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

Code:

insertAfter(elSelect,elForm.firstChild);

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

Code:

Element.insertAfter(elSelect,elForm.firstChild);

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

Code:

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

09/08/2011, 09h34
bulldo

Merci beaucoup jreaux62 :mrgreen:
09/08/2011, 10h29
NoSmoking
il ne me semble pas judicieux de passer par new Option
Code:

1 2 3 $('#idgroupesAdd').append( new Option(opt_txt,opt_val) // nouvelle Option (texte,valeur) );
à preuve cela ne fonctionne pas sous IE l'option est vide

il y a

Code:

$('<option>').val(opt_val).text( opt_txt).appendTo('#idgroupesAdd');

ou encore le clonage de l'élément

Code:

$('#idgroupesDispo option:selected').clone().appendTo($('#idgroupesAdd'));

Citation:

Envoyé par NoSmoking

il ne me semble pas judicieux de passer par new Option à preuve cela ne fonctionne pas sous IE l'option est vide

Argh ! exact ! j'oublie toujours ce :furieux: d'I.E. !
Code:

1 2 3 4 // ajout de l'option dans le select $('<option>').val(opt_val).text( opt_txt).appendTo('#idgroupesAdd'); // ou //$('#idgroupesDispo option:selected').clone().appendTo($('#idgroupesAdd'));
D'autres optimisations sont probablement possibles ...

11/08/2011, 11h55
bulldo

1 pièce(s) jointe(s)

Salut !
Je reviens sur le sujet car j'ai un autre problème bizarre. Quand j'affiche le contenu de la variable

Code:

$("#idgroupesAdd").text()

avec alert j'ai des caractères qui s'affichent et qui me gênent au moment où je vais stocker mes variables dans la base de données. (voir image )
Est ce que vous pouvez me dire d'où vient ce problème et comment je peux le résoudre ?
Merci d'avance
11/08/2011, 12h06
Invité

- quel est le texte "test" tapé ?
- comment écris-tu l'alert ?
- surtout : que cherches-tu à afficher dans l'alert ?
11/08/2011, 12h11
bulldo

Code:

alert($("#idgroupesAdd").text());

je veux voir le contenu du 2ème select avant et après l'ajout car je vais stocker les éléments sélectionnés dans la bdd dans un seul champ de ma table et séparés par un espace
11/08/2011, 12h15
Invité

Citation:

Envoyé par bulldo

car je vais stocker les éléments sélectionnés dans la bdd dans un seul champ de ma table et séparés par un espace

Dans ce cas, ce n'est pas comme cela qu'il fallait t'y prendre .....
Un textarea aurait été mieux.
11/08/2011, 12h35
bulldo

non parce qu'avec un textarea je ne peux pas supprimer une option du 2 ème select et ça j'en ai vraiment besoin. donc je suis obligé de passer par les select.

J'ai une solution :
Code:

1 2 3 4 5 6 7 8 9 // METTRE le contenu de la 2eme liste dans un champ INPUT (hidden) $("#idbtenvoi").click(function () { var opt_text = ''; $('#idgroupesAdd option').each(function() { opt_text = opt_text + ' ' + $(this).val(); }); // l'input type="hidden" est rempli avec toutes les valeurs des options (séparées par un espace) $('#idtexteAdd').val(opt_text); });
Et dans le formulaire :
Code:

1 2 3 <button id="idbtenvoi" name="btenvoi">envoi</button>  <input type="hidden" id="idtexteAdd" name="texteAdd" />
l'input type="hidden" est rempli avec toutes les valeurs des options (séparées par un espace) au moment de l'envoi du formulaire (clic sur le bouton "envoi") ...

Traitement : il suffit de récupérer directement

Code:

$texteAdd = trim($_POST['texteAdd']); // toutes les valeurs des options (séparées par un espace)

CQFD :ccool:

11/08/2011, 14h15
bulldo

désolé de te déranger encore une fois mais j'ai déja un bouton pour l'envoi et je ne sais pas comment modifier mon code pour essayer la solution que tu m'as proposée :oops:.

Code:

<input type="submit" value=" Valider " class="bouton_submit" />
11/08/2011, 14h47
Invité

tu ajoutes :

Citation:

<input type="submit" value=" Valider " class="bouton_submit" id="idbtenvoi" />

ps : si tu changes le nom de l'id, fait le aussi dans le script js.