select multiple avec mozilla

Version imprimable

Bonjour,
Je suis bloque pour une sélection multiple avec mozilla et js.
J'ai repris ce script

Citation:

listbox.js

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
    // JavaScript Document
    var color_selec='#0088ee';
    var color_over='#efffff';
    function trover(tab) {
    if (tab.bgColor != color_selec) {
    tab.bgColor = color_over;
    }
    tab.style.border = 'thin inset';
    tab.style.cursor = 'hand';
    }
    function trout(tab) {
    if (tab.bgColor != color_selec) {
    tab.bgColor='#ffffff';
    }
    }
    function trclick(tab) {
    for (i=0;i<alltr.length;i++)
    {
    if (alltr[i].sourceIndex==tab.sourceIndex) { ligne=i; }
    }
    if (ligne<nb_obj) {
    if ((multiple>0)&&(window.event.ctrlKey==true)){
    if (obj.options[ligne].selected == true) {
    obj.options[ligne].selected = false;
    }
    else {
    obj.options[ligne].selected = true;
    }
    }
    else {
    obj.selectedIndex = ligne;
    }
    }
    majtab();
    }
    function majtab() {
    for (i=0;i<alltr.length;i++)
    {
    if (obj.options[i].selected == true) {
    alltr[i].bgColor='#0088ee';
    alltr[i].style.color='#ffffff';
    }
    else {
    alltr[i].bgColor='#ffffff';
    alltr[i].style.color='#000000';
    }
    }
    }
    function listbox(name) {
    obj=document.getElementById(name);
    obj.style.display='none';
    nb_ligne=obj.size;
    nb_obj=obj.options.length;
    multiple=obj.type.search('multiple');
    document.write('<div id="divlistbox" style="height:100;overflow:auto;border:thin inset" onselectstart="return false">');
    document.write('<table id="listbox" border=0 cellspacing=0 cellpadding=0>');
    for (i=0;i<nb_obj;i++) {
    document.write('<tr height=20>');
    for (n=0;n<obj.options[i].innerHTML.split('|').length;n++) {
    document.write('<td>');
    document.write(obj.options[i].innerHTML.split('|')[n]);
    document.write('</td>');
    }
    document.write('</tr>');
    }
    document.write('</table></div>');
    document.getElementById('listbox').style.width= parseInt(obj.style.width)-21
    document.getElementById('divlistbox').style.width= parseInt(obj.style.width);
    document.getElementById('divlistbox').style.height= nb_ligne*20;
    alltr = document.getElementById('listbox').getElementsByTagName("tr");
    for (i=0;i<alltr.length;i++)
    {
    alltr[i].onmouseover= new Function("trover(this)");
    alltr[i].onmouseout = new Function("trout(this)");
    alltr[i].onclick = new Function("trclick(this,"+i+")");
    }
    }

test.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<SCRIPT src="listbox.js" type="text/javascript"></script>
</head>
<body>
<form name="form">
<select name="boxi" size=4 multiple id="boxi" style="width:400" onChange="test()">
<option><b>test1</b>|1er|c'est le premier test</option>
<option>test2|2eme|et celui la le second</option>
<option>test3|3eme|et encore</option>
<option>test4|4eme|blabla</option>
<option>test5|5eme|c'est très facile</option>
<option>test6|6eme|on continu</option>
<option>test7|7eme|on dirait que c'est la fin</option>
<option>test8|8eme|fini!</option>
</select>
<script>listbox("boxi");</script>
<input type="submit" name="Submit" value="Envoyer">
</form>
</body>
</html>

Le pb et que le window.event n'a pas l'air de fontionner sur mozilla. Du coup j'ai tente avec un window.which .... Marche pas non plus!!!

J'ai absolument besoins de faire une selection multiple et en plus sous mozilla...

Si quelqu'un a une idée???

Merci,
Guigo

15/01/2009, 19h34
Auteur

bonjour,

d'après ce que je vois cette listbox n'est plus ni moins qu'un tableau placé dans un div construit à partir du select (voir la fonction listbox()). Une fois ces éléments construits le select est caché (un display="none" est réalisé).

Maintenant pour ce qui est de l'objet event il y a deux écoles :
- sous IE event dépend de l'objet window (window.event) ;
- sous Firefox, l'objet event n'a pas d'objet parent. C'est pour ça que la fonction trclick() retourne une erreur sur cette ligne :

Code:

window.event.ctrlKey

Il faudrait passer l'objet event en paramètre de la fonction trclick().
16/01/2009, 10h43
guigo

Oki merci,
je teste tout de suite. Je te tiens au courant.

Guigo
16/01/2009, 11h16
guigo
Salout,

Bon sans trop de succès.... Mais je mis prend mal je penses... Peut tu m'aiguiller sur le passage du event stp.
Code:

1 2 3 4 5 6 function trout(tab, e) { } new Function("trout(this,"window.event")");
Merci,
Guigo
16/01/2009, 14h36
Auteur

J'ai regardé plus en détail ce code, pour moi il y a beaucoup d'incohérences :koi:

Par exemple dans la fonction listbox() :

Code:

alltr[i].onclick = new Function("trclick(this,"+i+")");

tu passes deux paramètres à trclick() or d'après la définition de trclick() on voit qu'elle n'attend qu'un seul paramètre....

Et bon nombre de variables ne sont pas déclarées, difficile de s'y retrouver :?

Je me demande s'il ne faudrait pas mettre à jour ce script, il date...
16/01/2009, 15h19
guigo

Re,
Je suis dac avec toi, mais j'avoue que je suis pas une star du javascript... Et du coup une adaptation m'aurait convenu :-).
Aurais tu une solution de dépannage a me proposer?

Merci,
Guigo

bonjour,

voilà un exemple :

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>

<title>Select personnalisé</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="Auteur - www.developpez.com" />
 

<script type="text/javascript">
<!-- 
var monSelect = function(nomSelect, options, objParent, multiple, coulSelec)
{
	// variables publiques
	this.tableau = null;
	this.inputSelection = null;
	
	// variables privées
	var ligne, cellule, tabOp;
	var i, j, n, m;
	
	// nombre d'options de la liste
	n = options.length;
	
	//** création de la liste 
	// création du tableau
	tableau = document.createElement("table");
	
	// style du tableau
	tableau.style.borderCollapse = "collapse";
	tableau.style.cursor = "default";
	tableau.style.margin = "2px";
		
	for (i=0; i<n; i++)
	{
		// ajout d'une ligne
		ligne = tableau.insertRow(-1);
		// style de la ligne
		ligne.style.border = "solid 2px #AAAAAA";	// sans effet sous IE ??
		
		// contenu des champs (tout ce se trouve entre les balises <option> d'un select)
		tabOp = options[i][1].split("|");	
		m = tabOp.length;

		for (j=0; j<m; j++)
		{
			cellule = ligne.insertCell(j);
			if (tabOp[j]!="")
				cellule.innerHTML = tabOp[j];
			else
				cellule.innerHTML = "&nbsp;";	// FF n'aime pas les cellules vides ;)
			
			// style des cellules
			cellule.style.paddingLeft = "20px";
			cellule.style.paddingRight = "20px";
			cellule.style.paddingTop = "2px";
			cellule.style.paddingBottom = "2px";
		}
		
		
		// valeur à transmettre (== à value de la balise <option value="data">)
		// => pour la syntaxe, voir FAQ
		ligne.optionSelect = options[i][0];	// on définit pour chaque ligne un attribut optionSelect
		ligne.onclick = function(event)
						{
							var ev;
                            ev = (event?event:window.event); // POUR IE
                            surligner(this, ev, this.optionSelect);
						}
	}
	
	// ajout du tableau dans l'objet parent
	objParent.appendChild(tableau);
	//****
	
	
	//****
	// création d'un input qui contiendra les valeurs des options sélectionnnées
	try
	{
	  // si une exception est levée, le contenu du catch est exécuté (voir FAQ)
	  inputSelection = document.createElement("<input name='"+nomSelect+"'>");
	}
	catch(erreur)
	{
	  inputSelection = document.createElement("input");
	  inputSelection.name = nomSelect; 	// nom du champ
	}
	 
	inputSelection.type = "hidden"; // champ caché
	
	inputSelection.id = nomSelect;	// id du champ
	inputSelection.value = "";
		 
	// ajout de l'input créé dans le conteneur
	objParent.appendChild(inputSelection);
	//****
	
	//*****************************************************
	// actions à réaliser lorsqu'une ligne est sélectionnée
	function surligner(ligne, ev, valeur)
	{
		var tabTR = tableau.getElementsByTagName("tr"); 
		var ctrl = ev.ctrlKey;	// appui sur la touche CTRL ?
		var n, i;
		
		n = tabTR.length;
		if ((multiple && !ctrl) || !multiple)
		{
			for (i=0; i<n; i++)
			{
				// réinitilisation des couleurs de fond de chaque ligne
				tabTR[i].style.backgroundColor = "";
				tabTR[i].couleur = "";
			}
			inputSelection.value = ""; // réinitilisation de l'input
		}
		
		// modification du style de la ligne
		if (!(ligne.couleur == coulSelec))
		{
			// ligne sélectionnée => on lui attribue la couleur de sélection
			ligne.style.backgroundColor = coulSelec;	
			ligne.couleur = coulSelec;	//variable nécessaire, pour le test ci-dessus

			// ajout de la valeur à l'input : le ";" est le séparateur
			inputSelection.value += valeur+";";		
		}
		else
		{
			// ligne déselectionnée => réinitilisation de la couleur du fond
			ligne.style.backgroundColor="";			
			ligne.couleur = "";
			
			// on supprime de l'input la valeur correspondant à la ligne
			// => on ne garde que les valeurs des lignes colorées
			inputSelection.value = "";
			for (i=0; i<n; i++)
			{
				if (tabTR[i].couleur==coulSelec)
				{
					//optionSelect a été définie lors de la création de chaque ligne du tableau
					// le ";" est le séparateur des valeurs
					inputSelection.value += tabTR[i].optionSelect+";"; 
				}
			}
		}
	}
}

monSelect.prototype =
{
	// pour gérer le reset de la liste lors de l'événement onclick d'un bouton
	// l'id du bouton est le paramètre de la fonction
	resetMonSelect : function(idBtnReset)
	{
		var obj = this;
		document.getElementById(idBtnReset).onclick = function(){obj.resetSelect()}
	}	
	,
	// fonction qui réinitialise le tableau
	resetSelect : function()
	{
		var tabTR = tableau.getElementsByTagName("tr"); 
		var n, i;
		
		n = tabTR.length;
		for (i=0; i<n; i++)
		{
			tabTR[i].style.backgroundColor = "";
			tabTR[i].couleur = "";
		}
		inputSelection.value = "";
	}
}

function initListe()
{
	var objParent;
	var s;
	
	var optionsListe = new Array();
	// Syntaxe des options : 
	// ["valeur de l'option (value)", "colonne_1|colonne_2|....|colonne_n"]
       // bien vérifier que chaque option a le même nombre de colonnes !!
       // chaque colonne est séparée par un |
	optionsListe[0] =  ["valeur_0","nom_0|prénom_0|adresse_0|ville_0"];
	optionsListe[1] =  ["valeur_1","nom_1|prénom_1|adresse_1|ville_1"];
	optionsListe[2] =  ["valeur_2","nom_2|||ville_2"];
	optionsListe[3] =  ["","nom_3|un long prénom_3|adresse_3|ville_3"];
	optionsListe[4] =  ["valeur_4","nom_4||adresse_4|ville_4"];
	optionsListe[5] =  ["valeur_5","nom_5|prénom_5|adresse_5|ville_5"];
	optionsListe[6] =  ["valeur_6","nom_6|prénom_6|une longue adresse_6|ville_6"];
	optionsListe[7] =  ["valeur_7","nom_7|prénom_7|adresse_7|ville_7"];
	optionsListe[8] =  ["valeur_8","nom_8|||ville_8"];
	optionsListe[9] =  ["valeur_9","un long nom_9| prénom_9|adresse_9|ville_9"];
	
	// objet contenant la liste
	objParent = document.getElementById("conteneur");
	
	// création de la liste
	// Syntaxe : new monSelect(nomSelect, options, objParent, multiple, coulSelec)
	// nomSelect : id/nom du champ contenant les options sélectionnées
	// options : tableau des options (cf. syntaxe ci-dessus)
	// objParent : objet contenant le select
	// multiple : true => select multiple ;  false => select simple
	// coulSelec : couleur de la sélection
	s = new monSelect("maListe", optionsListe, objParent, true, "#AAAAFF");
	
	// pour ajouter l'événement onclick sur un bouton permettant d'effacer les sélections
	// l'id du bouton est le paramètre
	s.resetMonSelect("idReset");	// pour gérer le reset de la sélection
}

//-->
</script>
 
</head>
 
 
<body onload="initListe()">

	<form action="" id="formulaire">

		<div id="conteneur" style="overflow:auto; height: 210px; width: 450px; border: inset 2px #AAAAAA">
		<!-- div contenant la liste -->
		</div>
		
		<div>
			<input type="submit" /> <input type="reset" id="idReset"/>
		</div>
	</form>

</body>
</html>

J'ai commenté le code. Les commentaires t'aideront à créer ta liste avec autant de colonnes que tu veux. Il faut simplement ajuster les paramètres width et height du composant qui contiendra cette liste (dans mon exemple c'est un div avec id="conteneur").

La liste est crée lors de l'événement onload de la page, la fonction initListe() est appelée.
Tu peux créer autant de listes que tu veux (cf.exemple) ;)

Tu peux avoir une liste avec une sélection simple ou multiple. Dans le cas d'une liste à sélection multiple, la touche CTRL est gérée ;). Voir mes commentaires.

Les valeurs des lignes sélectionnées sont placées dans un champ hidden, donc si tu envoies le formulaire c'est ce champ que tu dois interroger. Les valeurs sont séparées par un point virgule (cf. commentaires dans la fonction surligner() définie dans l'objet).

Le nom du champ est un paramètre de l'objet monSelect().
:arrow: dans ce cas il faut que le paramètre nomSelect soit unique si tu dois créer plusieurs listes.

Le script fonctionne très bien sous IE7 et Firefox 3. Je ne l'ai pas testé avec d'autres navigateurs.
Il y a juste un effet (qui n'a pas d'influence sur le script) que je n'ai pas réussi à supprimer :
- sous FF, la cellule dans laquelle tu cliques pour sélectionner une ligne peut être encadrée de bleu (parfois c'est tout la cellule qui prend un fond bleu).
- sous IE, si tu cliques sur un texte pour sélectionner la ligne, ce texte prend un fond bleu.

[edit]

pour supprimer l'encadré bleu sous FF, il faut ajouter à la fin de la fonction surligner(), le code suivant :

Code:

objParent.focus();

sous IE ça ne marche pas...

[/edit]

19/01/2009, 09h31
guigo

C de la bombe :-)

Je met ca en place dans la journée... Je te tiens au courant.

Merci merci et encore merci
Guigo
19/01/2009, 09h37
guigo

Ça exactement ce que je voulais.

Bonne journée, et vraiement merki,
Guigo
20/01/2009, 00h34
guigo
Bonjour,
J'ai mis nikel le script en place avec le tableau rempli qui va bien...
Il me reste un petit aménagement à faire...

Je voudrais avoir plusieurs boutons submit qui envoie une même value juste le nom change (comme ça je peux lancer des actions différentes). Concrètement j'aimerais que mes boutons envoie la premier variable du tableau + le nom du bouton. (J'ai bien essaye d'ajouter des boutons en html dans le form mais ça marche pas comme je veux :-( ).

ex :
Code:

1 2 3 4 5 6 <input type="submit" name=pdf /> <input type="submit" name=print /> ...
Merci,
Guigo
20/01/2009, 11h05
Auteur
Tu ne peux pas placer plusieurs bouton submit ou reset dans un formulaire.

Par contre tu peux avoir des boutons de type button :
Code:

1 2 3 <input type="button" value="Imprimer" name="btnPrint" /> <input type="button" value="Fichier PDF" name="btnPDF" />
Ensuite il faut gérer l'événement onclick sur ces boutons.

par contre là

Citation:

Concrètement j'aimerais que mes boutons envoie la premier variable du tableau + le nom du bouton.

j'avoue ne pas avoir saisi :oops:
20/01/2009, 14h07
guigo

J'avoue que mettre plusieurs boutons submit dans un form ne m'a jamais dérangé :-(...

J'essaye avec des types "button"... Je vous tiens au courant et post la soluse (si je l'ai...)

Merci encore
20/01/2009, 14h48
Auteur

Citation:

Envoyé par guigo

J'avoue que mettre plusieurs boutons submit dans un form ne m'a jamais dérangé :-(...

et tu n'as jamais eu de mauvaise surprises ?
Le bouton submit a un rôle bien précis : envoyer le formulaire sur ton serveur en exécutant (éventuellement) le script défini dans l'attribut action de la balise form.
De même un bouton reset a un rôle bien défini.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<form action="" id="formulaire">
	<center>
		<div id="conteneur" style="overflow:auto; height: 400px; width: 680px; border: inset 2px #AAAAAA">
		<!-- div contenant la liste -->
		</div>
 
 
		<input type="button" value="Supprimer" name="Del" onclick="submit()" />
		<input type="button" value="Modifier" name="Add" onclick="submit()"/>
		<input type="button" value="Voir le PDF" name="Pdf" onclick="submit()"/>
		<input type="button" value="Export" name="Exp"onclick="submit()" />
 
	</form>

Merci encore

20/01/2009, 18h33
Auteur

euh... ça marche :koi: ?
21/01/2009, 08h13
Bovino

Citation:

Envoyé par Auteur

euh... ça marche :koi: ?

J'en serais étonné comme toi...
@guigo :
Tu devrais créer un champ hidden, puis sur le onclick de chaque bouton, tu affectes la valeur de ce bouton au champ avant le submit(), comme ça tu retrouveras la valeur souhaitée :

Code:

onclick="document.getElementById('id_input_hidden').value = this.value; this.form.submit();"

Au passage, faire un submit() comme tu le fais peut être problématique, il vaut mieux, comme dans mon exemple, préciser le formulaire à soumettre. Il faut savoir que chaque élément de formulaire possède une propriété form (à ne pas confondre avec forms) qui pointe sur le formulaire dans lequel il est.