select multiple avec mozilla

**guigo** · 15/01/2009, 18h08

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

listbox.js

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

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

**Auteur** · 15/01/2009, 19h34

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 :

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

window.event.ctrlKey

Il faudrait passer l'objet event en paramètre de la fonction trclick().

**guigo** · 16/01/2009, 10h43

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

Guigo

**guigo** · 16/01/2009, 11h16

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 :

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

1
2
3
4
5
6
 
 
function trout(tab, e) {
}
 
new Function("trout(this,"window.event")");

Merci,
Guigo

**Auteur** · 16/01/2009, 14h36

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

Par exemple dans la fonction listbox() :

Code :

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

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

**guigo** · 16/01/2009, 15h19

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

select multiple avec mozilla

JavaScript

Vue hybride

Discussions similaires

Partager

Partager