select option et selecteur jquery

**gostbuster** · 14/04/2009, 10h11

Bonjour à tous,

Je suis face à un sérieux problème et je ne trouve pas de solutions. Je fais donc appel à vous :

Voici le soucis:
J'ai un champ de formulaireavec une liste de choix. Il se présente sous cette forme :

Code :

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

1
2
3
4
5
<select>
<option ....>opt1</option>
<option ....>opt2</option>
<option ....>opt3</option>
</select>

En couplant ceci avec Jquery et le plugin Qtip (http://craigsworks.com/projects/qtip/) je souhaite que lorsqu'on passe la souris sur une option, une tooltip souvre avec des informations concernant l'option. Exemple :

Par exemple, si je passe (et je laisse) ma souris sur Montana, j'aimerai qu'une tooltip s'ouvre à coté avec des informations supplémentaires.

Je n'ai pas de problème pour créer le tooltip ni pour exécuter la requête ajax.

Mon problème se situe en fait dans la selection de l'élément (les commentaires expliquent le problème):

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
$(function(){
	$("#description > option:not(:first):hover").qtip({
        
//pas de problème pour le selecteur, 
l'effet fonctionne bien lorsqu'on 
//passe la souris. le problème 
vient ensuite :
//la fonction qtip demande
 qu'on lui parametre certaines choses, 
//ici on va lui parametrer le contenu :
		
 content: 
		 {	
			//title:"Description de "+$(this).text(),
			
	
                        //ici dans un premier temps,
 je voudrais afficher la valeur 
value) de l'option sur laquelle 
est pointé ma souris. 
J'ai essayé tout un tas de choses,
 mais rien a faire, 
soit il m'affiche 0 (=la premiere value?) 
soit j'ai droit alors a un texte qui correspond 
au code de ma page (bizarre). Bref, je 
n'arrive pas a sélectionner l'élément 
où j'ai pointé ma souris...et c'est là 
que se situe mon problème....
			text:$(MON_ELEMENT).val()
			
			 }

Je pensais qu'avec $this, on récupéré l'element actif, mais visiblement ca ne fonctionne pas. Au risque de me répéter: je cherche a récuperer l'element "option sur laquelle j'ai la souris pointée".

Par avance merci.

**danielhagnoul** · 14/04/2009, 20h43

Bonsoir.

Je découvre qTip avec votre question.

Voici un exemple de liste déroulante avec qTip qui fonctionne bien sous F3... mais, hélas, ne marche pas avec IE8 !

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <meta name="Description" content="Expace de travail du webmestre." />
    <meta name="Keywords" content="jquery, javascript, json, html, css, exercices, plugin, documentation" />
    <meta http-equiv="Robots" content="none, noindex, nofollow" />
    <meta name="Robots" content="none, noindex, nofollow" />
    <title>Efface moi !</title>
    <link rel="stylesheet" type="text/css" href="../styles/humanity/jquery-ui-1.7.custom.css" media="all" />
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid red;
            font-size:0.8em;
            text-align:center;
        }
    </style>
    <script type="text/javascript" src="../scripts/jquery.js"></script>
    <script type="text/javascript" src="../scripts/jquery.qtip-1.0.0-beta4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            //qTip : beaucoup d'options voir http://craigsworks.com/projects/qtip/docs/tutorials
 
            //Pour la liste déroulante, il faut choisir :
            //pas de $("#pays[title]").qtip({ style: { name: 'cream', tip: true } }); -- recouvre le qTip
            //pas de title dans le select -- recouvre le qTip
            //et on montre le contenu du title de chaque option
            $("#pays option[title]").qtip({ style: { name: 'blue', tip: true } });
 
 
            $("#conteneur[title]").qtip({ style: { name: 'cream', tip: true }, position: { corner: 'topLeft' } });
        });
    </script>
</head>
<body>
    <div id="conteneur" title="Un commentaire pour tester IE8 !">
        <form style="margin:24px;">
            <select id="pays" name="liste_pays">
                <option title="Veuillez choisir un pays." value="rien" selected="selected">Veuillez choisir</option>
                <option title="Autriche : visitez le Tyrol." value="Autriche">Autriche</option>
                <option title="Belgique : la grand place de Bruxelles, Bruges, Gand, etc." value="Belgique">Belgique</option>
                <option title="Espagne : avez vous déjà vu une corrida ?" value="Espagne">Espagne</option>
                <option title="France : tout est beau, rien a jeter !" value="France">France</option>
            </select>
        </form>
    </div>
</body>
</html>

Reste à trouver pourquoi !

**danielhagnoul** · 14/04/2009, 21h11

Bonsoir.

Après divers tests, il est clair que IE ne tient aucun compte de la présence de la souris -- mouseover -- dans la liste déroulante. Les utilisateurs des diverses versions de IE devront donc se contenter du simple affichage du contenu du title.

**gostbuster** · 15/04/2009, 09h34

Bonjour, sur le forum officiel de qtip, on m'a répondu, je vous propose d'aller y jeter un coup d'oeil :
http://craigsworks.com/projects/qtip...value-problem/

**danielhagnoul** · 15/04/2009, 19h13

Bonsoir.

Dans l'exemple précédent, je récupérais la valeur de title, ici je récupère la valeur de l'élément.

Il est plus qu'évident qu'il faille boucler sur chaque élément pour en récupérer sa valeur, le site de qTip ne nous apprend vraiment rien à ce sujet, et rien sur le fonctionnement sous IE d'ailleurs.

Car toutes ces considérations ne changent rien au fait que pour une liste de choix rien ne marche dans le cas d'IE.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <meta name="Description" content="Expace de travail du webmestre." />
    <meta name="Keywords" content="jquery, javascript, json, html, css, exercices, plugin, documentation" />
    <meta http-equiv="Robots" content="none, noindex, nofollow" />
    <meta name="Robots" content="none, noindex, nofollow" />
    <title>Test de qTip</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid red;
            font-size:0.8em;
        }
        form#choisir {
            display:block;
            margin:12px;
            width:300px;
            background-color:#FFFFCC;
            border:1px solid red;
        }
        ul#pressroom {
            display:block;
            margin:12px;
            width:300px;
            background-color:#99FFCC;
            border:1px solid red;
        }
    </style>
    <script type="text/javascript" src="../scripts/jquery.js"></script>
    <script type="text/javascript" src="../scripts/jquery.qtip-1.0.0-beta4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#pays option").each(function(i, item) {
                $(item).qtip({
                    content: item.value,
                    style: { 
                        width: 200,
                        padding: 5,
                        background: '#A2D959',
                        color: 'black',
                        textAlign: 'center',
                        border: {
                            width: 7,
                            radius: 5,
                            color: '#A2D959'
                        },
                        name: 'dark',
                        tip: true
                    },
                    position: {
                        corner: {
                            target: 'topRight',
                            tooltip: 'leftMiddle'
                        }
                    }
                });
            });
 
            $("li").each(function(i, item) {
                $(item).qtip({
                    content: $(item).find("a").text(),
                    style: {
                        name: 'red',
                        tip: true
                    },
                    position: {
                        corner: {
                            target: 'topRight',
                            tooltip: 'leftMiddle'
                        }
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <form id="choisir">
            <select id="pays" name="liste_pays">
                <option value="rien" selected="selected">Veuillez choisir</option>
                <option value="Autriche">Autriche</option>
                <option value="Belgique">Belgique</option>
                <option value="Espagne">Espagne</option>
                <option value="France">France</option>
            </select>
        </form>
        <div id="affiche"></div>
        <ul id="pressroom">
          <li id="press1"><a href="#">Xpand2 design NaturalServers.com</a></li>
          <li id="press2"><a href="#">Brother Ali fansite in progress</a></li>
          <li id="press3"><a href="#">Xpand2 makes XMann identity</a></li>
          <li id="press4"><a href="#">Email newsletter for Savo AS</a></li>
          <li id="press5"><a href="#">Human-Resource.no launched!</a></li>
        </ul>
    </div>
</body>
</html>

select option et selecteur jquery

jQuery

Discussions similaires

Partager

Partager