<head>
<title>标题页</title>
</head>
<body onClick="d('divlist')">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input type="text" id="txtRegion" />
<div id="divList" style="display: none;width: "50"; border: 1px solid #0000aa; overflow: hidden; height: 150px; position: absolute; z-index: 9999; background-color: #ccffff;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="overflow: auto;position: absolute; z-index: 9999; width: 100%; height: 132px; background-color: #ffffcc;">
<input type="checkbox" id="l1" name="aa" title=""/><label for="aa">第一个</label><br />
<input type="checkbox" id="l2" name="bb" title=""/><label for="bb">第二个</label><br />
<input type="checkbox" id="l3" name="cc" title=""/><label for="cc">第三个</label><br />
<input type="checkbox" id="l4" name="dd" title=""/><label for="dd">第四个</label><br />
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<tr>
<td><input type="text" />
</td>
</tr>
<tr>
<td><input type="text" />
</td>
</tr>
<script LANGUAGE="JavaScript">
var oRegion = document.getElementById("txtRegion"); //需要弹出下拉列表的文本框
var oDivList = document.getElementById("divList"); //要弹出的下拉列表
var bNoAdjusted = true;
var vect;
//文本获得焦点时的事件
oRegion.onfocus = function()
{
oDivList.style.display = "block";
if (bNoAdjusted) //控制div是否已经显示的变量
{
bNoAdjusted = false;
//设置下拉列表的宽度和位置
oDivList.style.width = this.offsetWidth;
oDivListoDivList.style.posTop = oDivList.offsetTop + this.offsetHeight;
oDivListoDivList.style.posLeft = oDivList.offsetLeft - this.offsetWidth - 8;
}
};
function sel()
{
var vecttmp = 0X0000;
for(var i=1;i<=4;i++)
{
if(document.getElementById("l"+i).checked==true)
vecttmp |= 1<<(i-1);
}
vect = vecttmp;
}
function d(list)
{
sel();
//alert(window.event.clientX);
//alert(window.event.clientY);
var wx = window.event.clientX;
var wy = window.event.clientY;
var d_left = document.getElementById(list).offsetLeft;
var d_top = document.getElementById(list).offsetTop;
var d_width = document.getElementById(list).clientWidth;
var d_height = document.getElementById(list).clientHeight;
//alert(wx + '_' + wy + '_' + d_left + '_' + d_width + '_' + d_top + '_' + d_height)
if(wx < d_left || wy < d_top || wx > (d_left + d_width) || wy > (d_top + d_height)){
document.getElementById(list).style.display = "none";
alert(vect);}
return false;
}
</script>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
/带close按钮
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
</head>
<body onClick="d('divlist')">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input type="text" id="txtRegion" />
<div id="divList" style="display: none; border: 1px solid #0000aa;height:100px;width:100px; overflow: hidden; z-index: 9999; position: absolute; background-color: #FCFCFC;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id = "vllist" style="overflow: auto; width: 100%; height: 80px; background-color: #FCFCFC;">
<input type="checkbox" id="l1" name="aa" title=""/><label for="aa">第一个</label><br />
<input type="checkbox" id="l2" name="bb" title=""/><label for="bb">第二个</label><br />
<input type="checkbox" id="l3" name="cc" title=""/><label for="cc">第三个</label><br />
<input type="checkbox" id="l4" name="dd" title=""/><label for="dd">第四个</label><br />
</div>
</td>
</tr>
<tr>
<td align="right" id="tdClose" style="cursor: hand; background-color:#2894FF;">Close</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<tr>
<td><input type="text" />
</td>
</tr>
<tr>
<td><input type="text" />
</td>
</tr>
<script LANGUAGE="JavaScript">
var oRegion = document.getElementById("txtRegion"); //需要弹出下拉列表的文本框
var oDivList = document.getElementById("divList"); //要弹出的下拉列表
var oClose = document.getElementById("tdClose"); //关闭div的单元格,也可使用按钮实现
var colOptions = document.getElementsByTagName("input"); //所有列表元素
var bNoAdjusted = true;
oClose.onclick = function()
{
oDivList.style.display = "none"; //隐藏div,实现关闭下拉框的效果
};
//设置下列选择项的一些事件
//文本获得焦点时的事件
oRegion.onfocus = function()
{
oDivList.style.display = "block";
if (bNoAdjusted) //控制div是否已经显示的变量
{
bNoAdjusted = false;
//设置下拉列表的宽度和位置
oDivList.style.width = this.offsetWidth + 50;
oDivListoDivList.style.posTop = oDivList.offsetTop + this.offsetHeight;
oDivListoDivList.style.posLeft = oDivList.offsetLeft - this.offsetWidth - 8;
}
};
</script>
</body>
</html>