文本框提示层代码获取页面控件的绝对位置

最新推荐文章于 2025-05-04 21:56:48 发布

原创最新推荐文章于 2025-05-04 21:56:48 发布 · 521 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input #function #button #javascript #filter #border

本文提供了一个使用JavaScript实现的动态下拉菜单示例，包括显示和隐藏菜单、获取元素位置的功能。通过简单的HTML和JavaScript代码，展示了如何响应用户的点击事件来显示或隐藏一个带有复选框选项的下拉列表。

<div style="filter:alpha(opacity=100);margin-top:0px;margin-left:0px;display:none;position:absolute; height:100px; width:300px; left: 0px; top: 0px;border:1px;border-color:#b5cfe8;" id="divOptionWdt" class='tdbg'>
   <script type="text/javascript" charset="gb2312">
    var controlidwdt;
   function setOption()
   {
      var optionswdt = document.getElementsByName("optionswdt");
   var stringwdt= "";
      for(var i=0;i<optionswdt.length;i++)
   {
   if(optionswdt[i].checked)
   {
    if(i!=0)
    stringwdt+=","+optionswdt[i].value;
    else
     stringwdt+=optionswdt[i].value;
   }
   }
   document.getElementById(controlidwdt).value=stringwdt;
   }
   </script>
<table width="155%" height="100%" style="width: 100%;border:1px #b5cfe8 solid;">
   <tr>
   <td height="25" align="center" bgcolor="#63A1CB" style="width:428px;cursor:pointer;font-size:12px"><font color="white">请选择以下栏目</font></td>
</tr><tr><td style="height: 100%; width: 428px" bgcolor="#D1E5F3" >
<ol>
<li> <input type="checkbox" name="optionswdt" value="你的内容和公司名不符"/>你的内容和公司名不符</li>
<li> <input type="checkbox" name="optionswdt" value="111111sdf"/>option1</li>
<li> <input type="checkbox" name="optionswdt" value="111111sdf"/>option1</li>
<li> <input type="checkbox" name="optionswdt" value="111111sdf"/>option1</li>
</ol>

</td></tr>
<tr><td bgcolor="#337FB2" align="center" style="width: 428px;cursor:pointer"><input type="button" value="确定" onclick="setOption()"/>  <input type="button" onclick="document.getElementById('divOptionWdt').style.display='none'" value='关闭'/></td>
</tr></table>
</div>

function showList(e)
        {
            controlidwdt=e.id;

            var t=e.offsetTop;
            var l=e.offsetLeft;
            while(e=e.offsetParent)
            {
                t+=e.offsetTop;
                l+=e.offsetLeft;
            }
            document.getElementById("divOptionWdt").style.display="block";
            document.getElementById("divOptionWdt").style.top=t+28;
            document.getElementById("divOptionWdt").style.left=l;


        }