不是很懂JS，现求好心滴高手给个完整程序：当鼠标点击文本框后,在文本框的下方出现一个层（能挡住下拉菜单），层中的内容是那么滴：内容 内容 内容 内容 内容 内容
内容 内容 内容 内容 内容 内容
……然后点击其中一个“内容”，这个内容自动加到文本框中，并关闭层说明:文本框既可以自己写，也可以选择层中内容。如果层中能放一个独立的HTML页面那更好。
内容 内容 内容 内容 内容 内容
……然后点击其中一个“内容”，这个内容自动加到文本框中，并关闭层说明:文本框既可以自己写，也可以选择层中内容。如果层中能放一个独立的HTML页面那更好。
<!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>
<title> new document </title>
<style>
#tip {
width: 200px;
height: 100px;
position: absolute;
border: 1px solid #FFFFCC;
background-color: #DFDFDF;
font-size: 12px;
display: none;
z-index:100;
} #tip a{
text-decoration: none;
}
</style>
<script type="text/javascript">
<!--
var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };
var CancelBubble = function(e){
var e = e || window.event;
try{
e.cancelBubble = true;
}catch(ex){
try{
e.stopPropagation();
}catch(e){}
}
} var absPosition = function(element){
var iTop = iLeft = 0;
do{
iTop += element.offsetTop;
iLeft += element.offsetLeft;
}while(element = element.offsetParent);
return {'x': iLeft, 'y': iTop};
}
function showTip(e){
CancelBubble(e);
var otarget = window.event ? event.srcElement : e.target;
if(/*@cc_on!@*/0){
$("tip").innerHTML += "<iframe style='position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:-1;filter:alpha(opacity = 0)'></iframe>"
}
$("tip").style.display = "block"; with($("tip").style){
display="block";top=(absPosition(otarget).y + otarget.offsetHeight)+"px";left=absPosition(otarget).x+"px";
}
document.onmouseover = function(){
$("tip").style.display = "none";
document.onmouseover = null;
}
$("tip").onmouseover = function(e){
var e = e || window.event;
CancelBubble(e);
} } function disTip(e){
var otarget = window.event ? event.srcElement : e.target;
$('otxt').value = otarget.innerHTML;
$('tip').style.display = "none";
}
//-->
</script>
</head> <body>
<input type="text" id="otxt" onclick="showTip(event)"/><br/>
<select>
<option value="" selected="selected">测试列表框</option>
</select>
<div id="tip" onclick="disTip(event)">
<ul>
<li><a href="#">内容一</a></li>
<li><a href="#">内容二</a></li>
<li><a href="#">内容三</a></li>
<li><a href="#">内容四</a></li>
</ul>
</div>
</body>
</html>
顶顶，散分