文本框获取焦点弹出下拉框

最新推荐文章于 2022-08-08 20:40:31 发布

iteye_580

最新推荐文章于 2022-08-08 20:40:31 发布

阅读量287

点赞数

分类专栏： JS 类别技术文章标签：中国移动 JavaScript XHTML HTML ViewUI

本文链接：https://blog.csdn.net/iteye_580/article/details/81721780

版权

JS 类别技术专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>

</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>所属区域</td>
        <td><input type="text" id="txtRegion" />
            <div id="divList" style="display: none; border: 1px solid #0000aa; overflow: hidden; height: 150px; position: absolute; background-color: #ccffff;">
                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                        <div style="overflow: auto; width: 100%; height: 132px; background-color: ##ffffcc;">
                        <ul><b>中国</b>
                            <ul><b>华北地区</b>
                                <li>北京</li>
                                <li>天津</li>
                                <li>内蒙古</li>
                                <li>河北</li>
                                <li>河南</li>
                            </ul>
                            <ul><b>华东地区</b>
                                <li>上海</li>
                                <li>江西</li>
                                <li>江苏</li>
                                <li>浙江</li>
                            </ul>
                        </ul>
                        </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="right" id="tdClose" style="cursor: hand; background-color: #ff8888;">Close</td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
 </table>
<script LANGUAGE="JavaScript">
var oRegion = document.getElementById("txtRegion");   //需要弹出下拉列表的文本框
var oDivList = document.getElementById("divList"); //要弹出的下拉列表
var oClose = document.getElementById("tdClose");　　　//关闭div的单元格，也可使用按钮实现
var colOptions = document.getElementsByTagName("li"); //所有列表元素
var bNoAdjusted = true;
oClose.onclick = function()
{
    oDivList.style.display = "none";　　//隐藏div，实现关闭下拉框的效果
};
//设置下列选择项的一些事件
for (var i=0; i<colOptions.length; i++)
{
    colOptions[i].style.cursor = "hand";
    colOptions[i].onclick = function()　　　//为列表项添加单击事件
    {
        oRegion.value = this.innerText;
    };
    colOptions[i].onmouseover = function()　//为列表项添加鼠标移动事件
    {
        this.style.backgroundColor = "#ffff00";
    };
    colOptions[i].onmouseout = function()  //为列表项添加鼠标移走事件
    {
        this.style.backgroundColor = "";
    };
}
//文本获得焦点时的事件
oRegion.onfocus = function()
{
    oDivList.style.display = "block";
    if (bNoAdjusted)　　//控制div是否已经显示的变量
    {
        bNoAdjusted = false;
        //设置下拉列表的宽度和位置
        oDivList.style.width = this.offsetWidth + 50;
        oDivList.style.posTop = oDivList.offsetTop + this.offsetHeight;
        oDivList.style.posLeft = oDivList.offsetLeft - this.offsetWidth - 8;
    }
};
</script>
</body>
</html>

iteye_580

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本框获取焦点弹出下拉框

&lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;&lt;head&gt;&lt;title&gt;标题页&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;table border="0" cellpadding="0" cellspac
复制链接

扫一扫