spy select value
/Html JavaSript/Select/spy select value.html
<script type="text/javascript">
function spySelect() {
var pt, sel = document.getElementsByTagName("select");
for (pt = sel.length-1; pt>=0; --pt) {
sel[pt].onmouseover = function(event) {
var XY = getMouseXY(event);
var xx=XY.shift(), yy=XY.shift();
var value = this.options[this.selectedIndex].value;
popBox(xx+10, yy-5, this.name+" = "+value);
}
sel[pt].onmouseout = function() {
document.getElementById("spyTooltip").style.display='none';
}
}
var div = document.createElement("div");
div.id = "spyTooltip";
div.style.backgroundColor = "#ff6";
div.style.border = "1px solid gray";
div.style.position = "absolute";
div.style.display = "none";
div.style.fontSize = "0.8em";
div.style.padding = "0 3px";
document.body.appendChild(div);
}
function getMouseXY(e) {
// retourne X et Y de souris sous la forme d'un tableau [X, Y]
if(!e)e = window.event; // not standard for IE
if(!e.pageX){
/* add to IE standards property : */
e.pageX = e.clientX+document.body.scrollLeft;
e.pageY = e.clientY+document.body.scrollTop;
}
return [e.pageX, e.pageY];
}
function popBox(posx, posy, boxInnerHTML) {
var ttp = document.getElementById("spyTooltip");
ttp.style.left = posx + "px";
ttp.style.top = posy + "px";
ttp.innerHTML = boxInnerHTML;
ttp.style.display="";
}
</script>
<body onload="spySelect()">
<select name="sel1">
<option value="1">111
<option value="2">112
<option value="3">113
<option value="4">114
<option value="5">115
</select>
<br>
<select name="sel2">
<option value="1">111
<option value="2">112
<option value="3">113
<option value="4">114
<option value="5">115
</select>
<br>