Discussion :

[faeder]

Bonjour,

Je suis entrain de développer une maquette de site web, et l'une des requêtes du cahier des charges (heureusement pas une contrainte) est de pouvoir selectionner un nom dans une combobox, ou bien, lors d'un double click sur cette même combobox, d'ouvrir une page contenant toutes les informations disponibles sur toutes les personnes contenu dans la bdd.

Mais voila, si la taille de la combobox est superieur à 1 (elle devient donc une liste, ce qui ne repond plus au cahier des charges) ca marche sans problemes, mais des que la taille est de 1, alors la, l'evenement ondblclick est completement ignoré.

Je suppose que cela vient du fait que le menu se "déroule" lorsque l'on clique dessus, mais je n'en suis pas sur.

J'en appelle donc a votre aide pour me dire déjà si c'est possible, et ensuite, si vous avez la moindre idée de la cause, et aussi de la solution pour faire ça.

Merci,

Yann

PS : Désolé pour le choix de la section si c'est pas la bonne, mais je sais pas trop si ca depend du html ou du javascript, ce probleme

PS2 : voila la partie de mon code concernée :

Code :

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

1
2
3
4
5
6
7
8
<SELECT ID="menusDeroulant" name="effectifLigne1" SIZE="1"
             onDblClick="versTech();" 
             onMouseOver="OuvrirBulle('P. NOM');" 
             onMouseOut="FermerBulle();"
             STYLE="width:100%">
			<OPTION value="xxxxx">P. NOM</OPTION>
  			...
</SELECT>

ou versTech() est une fonction javascript pour changer de page.

[mathieugamin]

salut
Peut-être peux simplement passer par un évènement "onclick" puisque le double-click est impossible dans un select simple?

[faeder]

Salut,

Merci pour ton idee, mais ca ne marche pas plus, malheureusement.
Je comprend vraiment pas ce truc... (faut dire que les requetes de ce style faite par un client ne doivent pas courrir les rues, non plus. Franchement, qui a deja double cliqué dans une combobox pour charger quelquechose, hum ?)

[mathieugamin]

heu pardon, je voulais pas dire onclick, mais onchange !
Toutes mes excuses

[faeder]

salut,

nope, onChange ne marche pas non plus. Et même si ca avait fonctionné, je ne pense pas qque ca aurait fait ce que je voulais, mais bon, ca coute rien d'essayé

[E.Bzz]

nope, onChange ne marche pas non plus.

Ca aurait dû !
Vérifie que ta fonction ... fonctionne

A+

[mathieugamin]

Oui, si ça ne marche pas avec onchange, c'est qu'il y a un souci avec ton code...

D'autre part, tu dois pouvoir faire apparaître une infobulle pour les options du select en passant la souris dessus...

Je pense qu'il y a une erreur dans ton code d'appel à la fonction :

Code :

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

onMouseOver="OuvrirBulle('P. NOM');"

Ta fonction va ouvrir une bulle contenant P.NOM.

Il faut définir ta fonction avant et s'il y a une variable, ne pas la mettre entre quotes :

Code :

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

Ouvrirbulle(P + '.' + NOM)

Ensuite tu peux l'appeler sur un évènement:

Code :

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

onmouseover="Ouvrirbulle();"

Tu peux nous donner ton code si tu veux qu'on y jette un oeil...

[SpaceFrog]

le problème est assez simple, lorsque le size vaut 1 le premier click déroule l'option, du coup le select perds le focus et c'est l'option déroulée qui prends les clicks suivants, tandis que lorsque le size est supérieur les options sont déja deroulées et acceptent dès lors le doubleclick...

pourquoi ne pas remplacer le select par autre chose lorsque le size vaut un ... ?

j'ai tenté d'emuler le doubleclick au moyen du click et d'un flag, mais rien à fair

[SpaceFrog]

un pansement:

Code :

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

1
2
3
4
5
6
<SELECT ID="menusDeroulant" name="effectifLigne1" size=2
			       ondblclick="alert('coucou')"
             STYLE="width:99%;height:30px;">
			<OPTION value="xxxxx" >P. NOM</OPTION>
 
</SELECT>

laisse le size à 2 mais colle lui une seule option et force le height...
il accepte le dblclick ...

[mathieugamin]

Oui, mais je pense qu'il souhaite avoir le choix entre plusieurs options...

Le dblclick ne fonctionne pas sur les select.

Sinon, l'éventuelle solution serait de neutraliser le premier click, mais étant donné que l'on fait ça pour le clic droit à l'aide d'un alert(), je doute que cela convienne à ton client...

Seule solution : onchange...

[faeder]

@E.Bzz : Ouais, j'ai testé ma fonction, avec un onDblClick, sur la case de mon tableau qui contient le select. Donc, si je double clic dans l'espace minuscule qui separe les bords de la case de ma combobox, ca marche. Mais apparement, aucun evenement ne fonctionne sur mes combobox, a part onmouseover et onmouseout.

@mathieugamin : Pour ma fonction ouvrir bulle, elle marche tres bien. Mon site est pour l'instant a l'etat de maquette, donc il n'y a absolument rien de fonctionnel dedans, et ce que j'ai ecrit, n'était qu'un exemple, donc ca affichait exactement ce que je voulai, a savoir P. Nom . Globalement, mon site est pratiquement fini, et une fois que la gui sera approuvé, on commencera a coder de facon normal. (c'est comme ca que ma boite fonctionne : on essaie d'abord de voir ce qu'on peut faire, puis on montre au client, et une fois qu'il est satisfait de ce qu'il voit, on ne l'importune plus et on fait notre veritable appli derriere. D'ailleurs, pour l'instant, c'est du html brut (+javascript et css), mais ca deviendra du struts+hibernate+spring a la fin, donc tu vois, pratiquement aucun rapport avec le produit final, ce qui m'embette bien d'ailleur (c'est mon premier job ici et dans ces technos, donc....)

@spacefrog :
Comme le disais mathieugamin, je doit effectivement avoir plusieurs options dans mon select.

Et je ne comprend pas pourquoi le onChange ne marche pas....

Voila pour mon code :

HTML :

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
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
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
 
<HTML>
<HEAD>
<TITLE>Essai d'interface</TITLE>
 
<!--------------------------
---- SCRIPTS ET CSS -------
---------------------------->
 
<SCRIPT LANGUAGE="JavaScript" SRC="./Javascripts/bulle.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="./Javascripts/horloge.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="./Javascripts/afficherCacher.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="./Javascripts/calendar.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="./Javascripts/calendar-setup.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="./Javascripts/calendar-fr.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<SCRIPT LANGUAGE="JavaScript">
 
<!--
document.getElementByID("erreurIdentification").style.visibility='hidden';
 
function versTech(){
	window.location.replace("techniciens.html");
}
 
function versHoraires(){
	window.location.replace("horaires.html");
}
-->
 
</SCRIPT>
 
<LINK REL="stylesheet" TYPE="text/css" MEDIA="all" HREF="./CSS/calendar-tas.css" TITLE="calendar-tas.css" />
<LINK REL="stylesheet" TYPE="text/css" HREF="./CSS/bulle.css">
<LINK REL="stylesheet" TYPE="text/css" HREF="./CSS/style.css">
 
</HEAD>
 
<!------------------------------------------------------------
---- DEBUT DE PAGE (contient les 3 menus fixés par le css) -----
------------------------------------------------------------->
 
<BODY onload="heure()">
 
<DIV id="baniere">
 
</DIV>
 
<form name="formhorloge" onSubmit="0">
	<input id="dateActuelle" type="text" name="date" size=8 value="">
	<input id="heureActuelle" type="text" name="horloge" size=8 value="">
</form>
 
<DIV ID="conteneur">
 
<FORM>
 
<DIV id="titreId">IDENTIFICATION</DIV>
<DIV id="erreurIdentification">Une erreur d'identification s'est produite</DIV>
<SCRIPT LANGUAGE="JavaScript">
	cacheId("erreurIdentification");
</SCRIPT>
 
<TABLE ID="identification" cellspacing="1"><TR>
	<TD align="left">Identifiant:</TD>
	<TD align="left"><INPUT TYPE="text" NAME="login" ID="login" VALUE="" SIZE=10></TD></TR>
	<TR><TD align="left">Mot de passe:</TD>
		<TD align="left"><INPUT TYPE="password" NAME="pass" ID="pass" VALUE="" SIZE=10></TD>
</TR></TABLE>
 
<p id="bouton">
	<a href="#" class="boutonFond" title="S'enregistrer" onClick="afficherErreur()">
	<span class="icon">S'identifier</span>
</a></p>
 
<DIV id="banniereBasse">
 
<TABLE id="tableauBoutons">
	<TD width="10%">
		<INPUT TYPE="button" VALUE="Enregistrer" OnClick="window.location.href='essai.html'">
	</TD>
	<TD width="10%">
		<INPUT TYPE="button" VALUE="Annuler" OnClick="window.location.href='essai.html'">
	</TD>
	<TD width="10%">
		<INPUT TYPE="button" VALUE="Imprimer">
	</TD>
	<TD width="30%">
	</TD>
	<TD width="15%">
		<INPUT TYPE="button" VALUE="Voir les techniciens" OnClick="window.location.href='techniciens.html'">
	</TD>
	<TD width="15%">
		<INPUT TYPE="button" VALUE="Voir les codes horaires" onClick="window.location.href='horaires.html'">
	</TD>
</TABLE>
</DIV>
</FORM>
 
<!--------------------------
---- CORPS DE LA PAGE -----
---------------------------->
 
<FORM>
 
 
<TABLE id="escales" cellspacing="3"><TR>
<TD><FONT size="2">Escale : </FONT></TD>
 
<TD><SELECT id="menusDeroulant" name="escales" SIZE="1" onMouseOver="BulleWrite('aaa');" onMouseOut="BulleHide();" STYLE="width:100%">
  			<OPTION value="BES" ONMOUSEOVER="this.parentNode.title='Brest'">BES</OPTION>
			<OPTION value="CDG" ONMOUSEOVER="this.parentNode.title='Charles de Gaule'">CDG</OPTION>
			<OPTION value="ORY" ONMOUSEOVER="this.parentNode.title='Orly'">ORY</OPTION>
</SELECT></TD>
 
<TD width="10%"></TD>
<TD align="right"><A HREF="#" NAME="calendrier" ID="calendrier">calendrier</A></TD>
<TD align="right"><FONT size="2">Semaine numéro : </FONT></TD>
<TD align="right"><INPUT TYPE="text" NAME="semaine" ID="semaine" VALUE="" SIZE=1></TD>
<TD align="right"><FONT size="2">Du Lundi : </FONT></TD>
<TD align="right"><INPUT TYPE="text" NAME="dateDebut" ID="dateDebut" VALUE="" SIZE=10></TD>
<TD align="right"><FONT size="2">au Dimanche : </FONT></TD>
<TD align="right"><INPUT TYPE="text" NAME="dateFin" ID="dateFin" VALUE="" SIZE=10></TD>
<TD align="right"><FONT size="2">Saison : </FONT></TD>
<TD align="right"><INPUT TYPE="text" NAME="saison" ID="saison" VALUE="" SIZE=3></TD>
</TR></TABLE>
 
<script type="text/javascript">
    Calendar.setup({
      inputField  :	"semaine",  			// id du champ de saisie a remplir
      ifFormat    :	"%V",      				// format horaire a mettre dans le champs
	firstDay	:	1,					// le premier jour de la semaine est lundi
      showsTime   :	true, 			      // affichera le calendrier
      button      :	"calendrier",			// le boutton/lien permettant d'afficher le calendrier
      step        :	1,           			// affiche toutes les années dans un menu déroulant
	onUpdate	:	afficherDebutEtFinSemaine	// fonction appelée lors du choix d'une date
    });
 
//Foncion permmettant de remplir automatiquement les champs de debut et de fin de semaine, ainsi que celui de la saison.
    function afficherDebutEtFinSemaine(calendrier) {
        var date = calendrier.date;
        var time = date.getTime();
        var field = document.getElementById("semaine");
        if (field == calendrier.params.inputField) {
            field = document.getElementById("dateDebut");
		var numJour = date.getDay();
		var date2 = new Date(time-((numJour-1) * 24 * 60 * 60 * 1000));
		field.value = date2.print("%d/%m/%y");
		field = document.getElementById("dateFin");
		date2 = new Date(time+((7-numJour) * 24 * 60 * 60 * 1000));
        	field.value = date2.print("%d/%m/%y");
		var saisonS = new Date(date.getFullYear(),2,31);
		if(saisonS.getDay() != 0){
			saisonS = new Date(date.getFullYear(),2,31-saisonS.getDay());
		}
		var saisonW = new Date(date.getFullYear(),9,31);
		if(saisonW.getDay() != 0){
			saisonW.setTime(saisonW.getTime() - (saisonW.getDay()*24*60*60*1000));
		}
		field = document.getElementById("saison");
		if(time < saisonS.getTime()){
			field.value = "W"+new String(date.getFullYear()-1).substr(2,2);
		}else if(date.getTime() >= saisonW.getTime()){
			field.value = "W"+new String(date.getFullYear()+1).substr(2,2);
		}else{
			field.value = "S"+new String(date.getFullYear()).substr(2,2);
		}
	}
    }
</script>
 
</FORM> 
 
<BR>
 
<FORM>
<TABLE id="tableau"><TR>
		<TH id="th">Personnel</TH>
		<TH id="th">Fonction</TH>
		<TH></TH>
		<TH id="thJours">Lun</TH>
		<TH id="thJours">Mar</TH>
		<TH id="thJours">Mer</TH>
		<TH id="thJours">Jeu</TH>
		<TH id="thJours">Ven</TH>
		<TH id="thJours">Sam</TH>
		<TH id="thJours">Dim</TH>
		<TH id="th">Total</TH>
		<TH id="th">C100</TH>
		<TH id="th">R/U</TH>
		<TH id="thDates">Date C100</TH>
		<TH id="th">C700</TH>
		<TH id="th">R/U</TH>
		<TH id="thDates">Date C700</TH>
		<TH id="th">F100</TH>
		<TH id="th">R/U</TH>
		<TH id="thDates">Date F100</TH>
	</TR>
	<TR>
		<TD id="td" onDblClick="javascript:versTech();">
		<SELECT ID="menusDeroulant" name="effectifLigne1" SIZE="1" onChange="versTech()" onMouseOver="BulleWrite('aaa');" onMouseOut="BulleHide();" STYLE="width:100%">
			<OPTION value="D. BATISTE">D. BATISTE</OPTION>
  			<OPTION value="J. RENAUD" ONMOUSEOVER="this.parentNode.title=this.value">J. RENAUD</OPTION>
 	 		<OPTION value="T. DESVAUX" ONMOUSEOVER="this.parentNode.title=this.value">T. DESVAUX
  			<OPTION value="P. GAVESTON" ONMOUSEOVER="this.parentNode.title=this.value">P. GAVESTON
  			<OPTION value="A. MERCHER" ONMOUSEOVER="this.parentNode.title=this.value">A. MERCHER
  			<OPTION value="J.F. NSIETE" ONMOUSEOVER="this.parentNode.title=this.value">J.F. NSIETE
  			<OPTION value="J.M. HALLYNCK" ONMOUSEOVER="this.parentNode.title=this.value">J.M. HALLYNCK</OPTION>
		</SELECT>
		</TD><TD id="td">
			<INPUT type="text" value="Fonction du tech" STYLE="width:100%">
		</TD><TD width="1%">
		</TD><TD id="tdJours">
 
		<SELECT ID="menusDeroulant" name="codeLigne1Jour1" SIZE="1" onMouseOver="BulleWrite('aaa');" onMouseOut="BulleHide();" onDblClick"versHoraires();" STYLE="width:100%">
	  		<OPTION ONMOUSEOVER="this.parentNode.title=this.value">S1
  			<OPTION value="S2">S2
 	 		<OPTION value="S3" ONMOUSEOVER="this.parentNode.title=this.value">S3
  			<OPTION value="M1" ONMOUSEOVER="this.parentNode.title=this.value">M1
  			<OPTION value="M2" ONMOUSEOVER="this.parentNode.title=this.value">M2
  			<OPTION value="M3" ONMOUSEOVER="this.parentNode.title=this.value">M3
  			<OPTION value="A2" ONMOUSEOVER="this.parentNode.title=this.value">A2
  			<OPTION value="A3" ONMOUSEOVER="this.parentNode.title=this.value">A3
  			<OPTION value="w1" ONMOUSEOVER="this.parentNode.title=this.value">W1</OPTION>
		</SELECT>
	</TD><TD id="tdJours">
		<SELECT ID="menusDeroulant" name="codeLigne1Jour2" SIZE="1" onMouseOver="BulleWrite('aaa');" onMouseOut="BulleHide();" STYLE="width:100%">
	  		<OPTION value="S5" ONMOUSEOVER="this.parentNode.title=this.value">S5
  			<OPTION value="S2" ONMOUSEOVER="this.parentNode.title=this.value">S2
 	 		<OPTION value="S3" ONMOUSEOVER="this.parentNode.title=this.value">S3
  			<OPTION value="M1" ONMOUSEOVER="this.parentNode.title=this.value">M1
  			<OPTION value="M2" ONMOUSEOVER="this.parentNode.title=this.value">M2
  			<OPTION value="M3" ONMOUSEOVER="this.parentNode.title=this.value">M3
  			<OPTION value="A2" ONMOUSEOVER="this.parentNode.title=this.value">A2
  			<OPTION value="A3" ONMOUSEOVER="this.parentNode.title=this.value">A3
  			<OPTION value="w1">W1</OPTION>
		</SELECT>
	</TD><TD id="tdJours">
		<SELECT ID="menusDeroulant" name="codeLigne1Jour3" SIZE="1" onMouseOver="BulleWrite('aaa');" onMouseOut="BulleHide();" STYLE="width:100%">
			<OPTION value="nulle" > </OPTION>
	  		<OPTION value="S5" ONMOUSEOVER="this.parentNode.title=this.value">S5
  			<OPTION value="S2" ONMOUSEOVER="this.parentNode.title=this.value">S2
 	 		<OPTION value="S3" ONMOUSEOVER="this.parentNode.title=this.value">S3
  			<OPTION value="M1" ONMOUSEOVER="this.parentNode.title=this.value">M1
  			<OPTION value="M2" ONMOUSEOVER="this.parentNode.title=this.value">M2
  			<OPTION value="M3" ONMOUSEOVER="this.parentNode.title=this.value">M3
  			<OPTION value="A2" ONMOUSEOVER="this.parentNode.title=this.value">A2
  			<OPTION value="A3" ONMOUSEOVER="this.parentNode.title=this.value">A3
  			<OPTION value="w1" ONMOUSEOVER="this.parentNode.title=this.value">W1</OPTION>
		</SELECT>
	</TD><TD id="tdJours">
		<SELECT ID="menusDeroulant" name="codeLigne1Jour4" SIZE="1" onMouseOver="BulleWrite('aaa');" onMouseOut="BulleHide();" STYLE="width:100%">
			<OPTION value="nulle" > </OPTION>
	  		<OPTION value="S5" ONMOUSEOVER="this.parentNode.title=this.value">S5</OPTION>
  			<OPTION value="S2" ONMOUSEOVER="this.parentNode.title=this.value">S2</OPTION>
 	 		<OPTION value="S3" ONMOUSEOVER="this.parentNode.title=this.value">S3</OPTION>
  			<OPTION value="M1" ONMOUSEOVER="this.parentNode.title=this.value">M1</OPTION>
  			<OPTION value="M2" ONMOUSEOVER="this.parentNode.title=this.value">M2</OPTION>
  			<OPTION value="M3" ONMOUSEOVER="this.parentNode.title=this.value">M3</OPTION>
  			<OPTION value="A2" ONMOUSEOVER="this.parentNode.title=this.value">A2</OPTION>
  			<OPTION value="A3" ONMOUSEOVER="this.parentNode.title=this.value">A3</OPTION>
  			<OPTION value="w1" ONMOUSEOVER="this.parentNode.title=this.value">W1</OPTION>
		</SELECT>
	</TD><TD id="tdJours">
		<SELECT ID="menusDeroulant" name="codeLigne1Jour5" SIZE="1" onMouseOver="BulleWrite('aaa');" onMouseOut="BulleHide();" STYLE="width:100%">
	  		<OPTION value="S5" ONMOUSEOVER="this.parentNode.title=this.value">S5</OPTION>
  			<OPTION value="S2" ONMOUSEOVER="this.parentNode.title=this.value">S2</OPTION>
 	 		<OPTION value="S3" ONMOUSEOVER="this.parentNode.title=this.value">S3</OPTION>
  			<OPTION value="M1" ONMOUSEOVER="this.parentNode.title=this.value">M1</OPTION>
  			<OPTION value="M2" ONMOUSEOVER="this.parentNode.title=this.value">M2</OPTION>
  			<OPTION value="M3" ONMOUSEOVER="this.parentNode.title=this.value">M3</OPTION>
  			<OPTION value="A2" ONMOUSEOVER="this.parentNode.title=this.value">A2</OPTION>
  			<OPTION value="A3" ONMOUSEOVER="this.parentNode.title=this.value">A3</OPTION>
  			<OPTION value="w1" ONMOUSEOVER="this.parentNode.title=this.value">W1</OPTION>
		</SELECT>
	</TD><TD id="tdJours">
		<SELECT ID="menusDeroulant" name="codeLigne1Jour6" SIZE="1" onMouseOver="BulleWrite('aaa');" onMouseOut="BulleHide();" STYLE="width:100%">
	  		<OPTION value="A4" ONMOUSEOVER="this.parentNode.title=this.value">A4</OPTION>
  			<OPTION value="S2" ONMOUSEOVER="this.parentNode.title=this.value">S2</OPTION>
 	 		<OPTION value="S3" ONMOUSEOVER="this.parentNode.title=this.value">S3</OPTION>
  			<OPTION value="M1" ONMOUSEOVER="this.parentNode.title=this.value">M1</OPTION>
  			<OPTION value="M2" ONMOUSEOVER="this.parentNode.title=this.value">M2</OPTION>
  			<OPTION value="M3" ONMOUSEOVER="this.parentNode.title=this.value">M3</OPTION>
  			<OPTION value="A2" ONMOUSEOVER="this.parentNode.title=this.value">A2</OPTION>
  			<OPTION value="A3" ONMOUSEOVER="this.parentNode.title=this.value">A3</OPTION>
  			<OPTION value="w1" ONMOUSEOVER="this.parentNode.title=this.value">W1</OPTION>
		</SELECT>
	</TD><TD id="tdJours">
		<SELECT ID="menusDeroulant" name="codeLigne1Jour7" SIZE="1" onMouseOver="BulleWrite('aaa');" onMouseOut="BulleHide();" STYLE="width:100%">
	  		<OPTION value="M5" ONMOUSEOVER="this.parentNode.title=this.value">M5</OPTION>
  			<OPTION value="S2" ONMOUSEOVER="this.parentNode.title=this.value">S2</OPTION>
 	 		<OPTION value="S3" ONMOUSEOVER="this.parentNode.title=this.value">S3</OPTION>
  			<OPTION value="M1" ONMOUSEOVER="this.parentNode.title=this.value">M1</OPTION>
  			<OPTION value="M2" ONMOUSEOVER="this.parentNode.title=this.value">M2</OPTION>
  			<OPTION value="M3" ONMOUSEOVER="this.parentNode.title=this.value">M3</OPTION>
  			<OPTION value="A2" ONMOUSEOVER="this.parentNode.title=this.value">A2</OPTION>
  			<OPTION value="A3" ONMOUSEOVER="this.parentNode.title=this.value">A3</OPTION>
  			<OPTION value="w1" ONMOUSEOVER="this.parentNode.title=this.value">W1</OPTION>
		</SELECT>
	</TD>
	</TD><TD id="tdNiveaux">
		<FONT size=1><B>35.00</B></FONT>
	</TD><TD id="tdNiveaux">
		<INPUT type="text" name="C100" value="" STYLE="width:100%">
	</TD><TD id="tdNiveaux">
		<INPUT type="text" name="ruC100" value="" STYLE="width:100%">
	</TD><TD id="tdDates">
		<INPUT type="text" name="dateC100" value="" STYLE="width:100%">
	</TD><TD id="tdNiveaux">
		<INPUT type="text" name="C700" value="" STYLE="width:100%">
	</TD><TD id="tdNiveaux">
		<INPUT type="text" name="ruC700" value="" STYLE="width:100%">
	</TD><TD id="tdDates">
		<INPUT type="text" name="dateC700" value="" STYLE="width:100%">
	</TD><TD id="tdNiveaux">
		<INPUT type="text" name="F100" value="" STYLE="width:100%">
	</TD><TD id="tdNiveaux">
		<INPUT type="text" name="ruF100" value="" STYLE="width:100%">
	</TD><TD id="tdDates">
		<INPUT type="text" name="dateF100" value="" STYLE="width:100%">
	</TD>
	</TR>
</TABLE>
</FORM>
</DIV>
 
</BODY>	
</HTML>

Le css, au cas ou:

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
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
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
 
body {	
		background: url(../img/fond.jpg) no-repeat fixed bottom left;
            margin: 0; 
		padding: 0;
            }
 
a:link, a:visited { 
		color: #FFF; 
            font-weight: bold;
            text-decoration: none; 
		}
 
a:hover, a:active {             
		color: #FFB855;
            text-decoration: underline;   	
		}
 
#baniere {
		position: fixed;
		top: 0px;
		height: 100px;
		left: 159px;
		width: 100%;
		float: right;
		background-image: url(../img/Baniere.jpg);
		background-repeat: no-repeat;
		z-index: 1;
		border-bottom: medium solid #0B1D4F;
		}
 
#conteneur { 
		position: relative;
 
            padding-top: 100px;
		padding-left: 159px;
		}
 
#escales {
		position: relative;
            width: 99.9%;
		float: Left;
		border: medium solid #6495ed;
		border-collapse: collapse;
            margin: 0;
		padding: 0;
            }
 
#dates {
		position: relative;
            width: 50%;
		right: 50px;
            float: right;
            margin: 0;
		padding: 0; 
            }
 
#menusDeroulant {
		font-size: 0.6em;
		text-align: left;
	 	}
 
#tableau {
		position: relative;
		top: 20px;
            width: 99.9%;
            float: left;	 
		border: medium solid #6495ED;
		border-collapse: collapse;
 
		}
 
#tableauHoraires {
		position: relative;
		top: 30px;
            width: 50%;
		left: 25%;
            float: left;	 
		border: medium solid #6495ED;
		border-collapse: collapse;
		}
 
#banniereBasse {
		position: fixed;
		bottom: 0px;
		height: 52px;
            width: 100%;
            float: bottom;	 
		border-top: medium solid #0B1D4F;
		background-image: url("../img/BaniereBoutons.jpg");
		z-index: 1;
		}
 
#tableauBoutons {
		position: relative;
		bottom: 0px;
		height: 52px;
            width: 100%;
            float: left;
		z-index: 1;
		}
 
#th {
		font-family: monospace;
		border: thin solid #6495ed;
		padding: 2px;
		background-color: #D0E3FA;
		}
 
#thDates {
		font-family: monospace;
		border: thin solid #6495ed;
		padding: 2px;
		background-color: #D0E3FA;
		}
 
#thJours {
		font-family: monospace;
		border: thin solid #6495ed;
		padding: 2px;
		background-color: #D0E3FA;
		}
 
#td {
		font-family: sans-serif;
		border: thin solid #6495ed;
		width: 11%;
		padding: 2px;
		text-align: center;
		background-color: #ffffff;
		}
 
#tdDates {
		font-family: sans-serif;
		border: thin solid #6495ed;
		width: 7%;
		padding: 2px;
		text-align: center;
		background-color: #ffffff;
		}
 
#tdJours {
		font-family: sans-serif;
		border: thin solid #6495ed;
		width: 5%;
		padding: 2px;
		text-align: center;
		background-color: #ffffff;
		}
 
#tdNiveaux {
		font-family: sans-serif;
		border: thin solid #6495ed;
		width: 2%;
		padding: 2px;
		text-align: center;
		background-color: #ffffff;
		}
 
#heureActuelle {
		position: fixed;
		top: 30px;
		left: 0;
		height: 1.5em;
		width: 159px;
		float: left;
		text-align: center;
		font-size: 1.5em;
		border-width:0;
		background-color: #0B1D4F;
		color: #AC996F;
		}
 
#dateActuelle {
		position: fixed;
		top: 10px;
		left: 0;
		height: 1.5em;
		width: 159px;
		float: left;
		text-align: center;
		font-size: 1.5em;
		border-width:0;
		background-color: #0B1D4F;
		color: #AC996F;
		}
 
#identification {
		position: fixed; 
		top: 150px;
		left: 0;
		width: 159px;
		height: 60px;
		float: left;
		color: #AC996F;
		font-size: 1em;
		}
 
#titreId {
		position: fixed; 
		top: 100px;
		left: 0;
		width: 159px;
		height: 30px;
		float: left;
		color: #AC996F;
		font-size: 1em;
		font-weight:bold;
		text-align: center;
		}
 
#erreurIdentification {
		position: fixed; 
		top: 120px;
		left: 0;
		width: 159px;
		height: 30px;
		float: left;
		color: #FF0000;
		font-size: 0.8em;
		font-weight: bold;
		text-align: center;
		}
 
#bouton {
		position: fixed;
		top: 210px;
		left: 0px;
		width: 159px;
		height: 30px;
		float: left;
		font-size: 1em;
		text-align: center;
		}
 
/* Style des boutons remplacés par des liens*/
 
a.boutonFond, a.boutonDis {
		display: block;
		background-color: transparent;
		background-image: url(../img/fondBouton.jpg);
		background-repeat: no-repeat;
		width: 132px;
		height: 28px;
		margin: 5px auto;
		padding: 5px 0 0 0;
		text-align: center;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 100%;
		font-weight: bold;
		text-decoration: none;
}
 
a.boutonFond:link, a.boutonFond:visited {
		color: #002577;
}
 
a.boutonFond:hover, a.boutonFond:active {
		background-position: 0 -36px;
		color: #FF7200;
}
 
a.boutonDis:link, a.boutonDis:visited, a.boutonDis:hover, a.boutonDis:active {
		background-position: 0 -72px;
		color: #5F5F5F;
		cursor: default;
}
 
.icon {
		display: inline-block;
		background-repeat: no-repeat;
		padding: 0 0 5px 8px;
}
 
a.boutonFond:hover .icon, a.boutonFond:active .icon {
		background-position: 0 -28px;
}
 
a.boutonDis:link .icon, a.boutonDis:visited .icon, a.boutonDis:hover .icon, a.boutonDis:active .icon {
		background-position: 0 -56px;
}

Et je crois que c'est tout. Les javascripts importésau début sont tous fonctionnels, donc je ne pense pas qu'il soit nécessaire de les inclures.

Vila, bonne chance pour tout lire, c'est un peu chaotique

Merci pour votre aide

Yann

[SpaceFrog]

le ondblclick ne fonctionne pas sur les select ????

avez vous au moins testé mon code ???

Code :

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

1
2
3
4
5
6
7
8
9
10
<SELECT ID="menusDeroulant" name="effectifLigne1" size=2
			       ondblclick="alert('coucou')"
             STYLE="width:99%;height:30px;">
			<OPTION value="xxxxx" >P. NOM</OPTION>
			<OPTION value="xxxxx" >P. NOM</OPTION>
			<OPTION value="xxxxx" >P. NOM</OPTION>
			<OPTION value="xxxxx" >P. NOM</OPTION>
			<OPTION value="xxxxx" >P. NOM</OPTION>
 
</SELECT>

[faeder]

sisi, c'est marqué dans mon premier message

Avec une liste (select de taille > 1), pas de souci, le double clique marche tres bien, mais ca ne reponds pas a mon cahier des charges

[mathieugamin]

le ondblclick ne fonctionne pas sur les select ????
avez vous au moins testé mon code ???

Oui, bien sûr, mais on parle depuis le début des select de taille 1, pas des multiples...


Sinon, l'autre solution est de simuler un select tout en JS rempli avec des liens et là, on aura une impression de dropdown et la possibilité de faire un évènement ondblclick très facilement...

Qu'en penses-tu?

[faeder]

Une combobox en javascript, je m'etais renseigné a ce sujet aussi, mais ca me parraissait trop lours a mettre en place, vu que des combobox fonctionnant de cette maniere, il peut y en avoir facilement plus de 200 sur une seule page

[SpaceFrog]

justement l'astuce c'est de ne pas mettre de taille 1 ...

Je me demande si tu a vraiment lu et testé mes code ...

le premier code donné size =2 mais une seule option ... tu triche ensuite avec le height et il accepete le ondblclick !

[mathieugamin]

Mais c'est quoi ton site?
Une usine, une centrale nucléaire, un programme de gestion des finances entières de l'Etat?

200 par page?

[faeder]

spacefrog, je dois avouer que je ne comprends pas tout. Enfin si, je vois exactement ce que tu veux faire, faire une liste dont seul le premier element est visible, mais je n'y arrive pas, même en copiant ton code. Est il possible que mes styles CSS empeche un redimensionnement correct ?

[faeder]

Mon site, c'est un site de gestion de planning. Resultat, on doit stocker dans une comboliste une reference vers une personne, et dans 7 autre combobox (1 par jour le code horaire sur lequel ils vont travailler, ce qui fait donc 8 combobox par ligne, et evidement, a une escale (c'est un truc de techniciens d'avions) il peut y avoir jusqu'a 20 personnes en temps normal comme a cdg par exemple, et jusqu'a 40 en temps anormal

[SpaceFrog]

??? j'ai testé sous IE et FFX et je colle sans problème une hauteur au select ...

si tu as un css ça ne devrait pas gèner pouisque le style dasn la blaise est prioritaire par rapport au style externe