Valeur surlignée d'un select

**Amarath** · 16/04/2008, 12h08

Bonjour,

Après de nombreuse recherches infructueuses sur le net, je recherche de l'aide.

Dans une liste déroulante, j'aimerais pouvoir récupéré la valeur sur laquelle se trouve la souris (celle qui est surlignée quand la liste est déroulée) pour pouvoir avec une aide pour l'utilisateur.

Le problème est que je n'ai pas trouver comment récupérer cette valeur dans le script.
Par avance merci à ceux qui connaissent la solution.

Cordialement,

**le_chomeur** · 16/04/2008, 12h20

il te faut implémenter ta méthode sur option et non sur le select :

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
 
<!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=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
function test(monOption){
	var laSelection = monOption.text;
	document.getElementById('reponse').innerHTML = laSelection;
 
}
</script>
</head>
 
<body>
<select>
<option value="test" onmouseover="test(this);">test</option>
<option value="test2" onmouseover="test(this);">test2</option>
<option value="test3" onmouseover="test(this);">test3</option>
<option value="test4" onmouseover="test(this);">test4</option>
</select>
<br /><br /><br /><br /><br /><br />
<div id="reponse"></div>
</body>
</html>

voila

**SpaceFrog** · 16/04/2008, 12h22

Je ne pense pas que ce soit possible...
on peut récupérer la valeur selectionnée, mais à mon avis pas la valeur survolée ...
A moins de faire une usine à gaz avec la position de souris ...

Les options n'acceptent pas le onmouseover en tout cas pas sous IE ... sous FFX je crois que oui ..

si tu veux une infobulle sur des options, il te faudra simuler un select avec des ul et li ...

**Amarath** · 16/04/2008, 12h32

Je confirme le onMouseOver ne fonctionne pas sur les options.
Je vais essayer de trouver un select personnaliser qui contient ce que je cherche. Merci.

**le_chomeur** · 16/04/2008, 12h34

mince j'ai été trop vite en besogne , effectivement cela ne fonctionne pas sous ie ( tellement l'habitude de tester sous FF

)
la solution ul+li est effectivement la solution la plus propre

**Amarath** · 18/04/2008, 12h16

Pour ceux que ça pourrait aider, je me suis inspirer de http://javascript.developpez.com/faq...ript#InfoBulle
pour faire

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
    function getXMLHTTP(){
		var xhr = null;
		if(window.XMLHttpRequest)
		{ // Firefox et autres
			xhr = new XMLHttpRequest();
		}
		else if(window.ActiveXObject)
		{ // Internet Explorer
			try
			{
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch(e)
			{
			try
				{
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch(e1)
				{
					xhr = null;
				}
			}
		}
		else
		 { // XMLHttpRequest non supporté par le navigateur
			alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
		}
 
		return xhr;
		}
		//Objet XMLHTTPRequest
		var XHR = null;
 
		function detail_bulle(obj,eltname){
		//Si l'objet existe déjà on abandonne la requête et on le supprime
		if(XHR && XHR.readyState != 0)
		{
		XHR.abort();
		delete XHR;
		}
		//Création de l'objet XMLHTTPRequest
		XHR = getXMLHTTP();
		if(!XHR)
		{
			return false;
		}
		XHR.open("GET","detail_bulle.php?ivalue=" + obj.value + "&iname=" + eltname, true);
		XHR.onreadystatechange = function()
		{
			if (XHR.readyState == 4)
			{
				if(bal){
					bulle.removeChild(bal);
					bal=false;
				};
				bal=document.createElement('div');
				bal.style.fontWeight=100;
				bal.style.backgroundColor="white";
				bal.style.border="solid";
				var chaine=XHR.responseText;
				bal2=document.createTextNode(chaine);
				bal.appendChild(bal2);
				bulle.appendChild(bal);
				if(chaine=="Aucun"){
					bulle.removeChild(bal);
					bal=false;
				};
			}
		};
		XHR.send(null);
	}
 
	document.write('<div style="position:absolute;display:none" id="bulle"></div>')
	var bal=false;
	var bulle=document.getElementById('bulle');
	var detail = '';
	nom ='';
	function on(e){
		if(!e){
			window.event.cancelBubble=true
		}
		else{
			e.stopPropagation()
		};
		//position de la bulle
		if(this.name){
 
			nom = this.name;
		} else {
			ns= (navigator.appName.search("Nestcape")!=-1) ? window.pageXOffset : 0;
			ns2= (navigator.appName.search("Nestcape")!=-1) ? window.pageYOffset : 0;
			posx= (!e) ? event.clientX+document.documentElement.scrollLeft : e.pageX+ns;
			posy= (!e) ? event.clientY+document.documentElement.scrollTop : e.pageY+ns2;
			hori=(posx > (screen.availWidth - 200)) ? -250 : 0;
			bulle.style.left= posx+hori+"px";
			bulle.style.top= posy+"px";
			bulle.style.display="block";
			detail_bulle(this,nom);
		}
	}
	function off(e){
		if(!e){
			window.event.cancelBubble=true
		}else{
			e.stopPropagation()
		};
		bulle.style.display='none';
		if(bal){
			bulle.removeChild(bal);
			bal=false;
		};
 
	}
var tagtype=new Array('OPTION','SELECT');
		var expl=new Array('image','contenant de type bloc','paragraphe','formulaire',
		'titre n°1','tableau','cellule de tableau','lien','contenant intra-ligne',
		'contrôle de formulaire','zone de texte multiligne','barre horizontale',
		'titre n°2','liste d\'options');
		var tags=new Array();
		for(i=0;i != tagtype.length;i++){
			tags[tagtype[i]]=expl[i]
		}
		for(i=0;i != tagtype.length;i++){
			for(j=0;j != document.getElementsByTagName(tagtype[i]).length;j++)
		{
				document.getElementsByTagName(tagtype[i])[j].onmouseover=on;
				document.getElementsByTagName(tagtype[i])[j].onmouseout=off;
			};
		}
		document.body.onclick=off;

Le test if(chaine=="Aucun") me permettant de ne pas le faire pour tous mes SELECT même si la bulle apparaitra rapidement avant de disparaitre.

Valeur surlignée d'un select

JavaScript

Vue hybride

Discussions similaires

Partager

Partager