html 点击控件显示下拉框

最新推荐文章于 2024-07-06 14:43:30 发布

Quagger

最新推荐文章于 2024-07-06 14:43:30 发布

阅读量1.4w

点赞数

分类专栏： Html&javascript

本文链接：https://blog.csdn.net/daydring/article/details/15813209

版权

Html&javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<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;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;
    }
};