Question

下拉列表<option>中 ONMOUSEOVER显示注释

一个<select> 列表，当鼠标在其选项移动时同时显示备注，请问如何实现，代码越简单越好。例如：select选项为国家时，鼠标在中国上停留时，旁边同时显示注释中国地理位置等……
谢谢！

Answer 1

HTML：
<select id="selects">
<option selected="selected" id="brazil" onmouseover="tooltip(this)" onmouseout="nodisplay()" onclick="nodisplay()">巴西</option>
<option id="usa" onmouseover="tooltip(this)" onmouseout="nodisplay()" onclick="nodisplay()">美国</option>
<option id="chn" onmouseover="tooltip(this)" onmouseout="nodisplay()" onclick="nodisplay()">中华人民共和国</option>
</select>
<div id="tooltipBlock" style="position: block; display: none;">sdffds</div>

JAVASCRIPT：
var tip = document.getElementById("tooltipBlock");
var selects = document.getElementById("selects");
function tooltip(obj) {
var x = selects.offsetLeft, y = obj.offsetTop, h = obj.offsetHeight, w = selects.offsetWidth;
/*tip.style.width = w + "px"; （这部分是定义显示提示的块的宽度） */
tip.style.marginLeft = x + w + "px";
tip.style.marginTop = y - 30 + "px";
tip.style.display = "block";
tip.innerHTML = "这部分为程序传递（把数据库里相关国家资料传过来）";
}
function nodisplay() {
tip.style.display = "none";
}