`

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

中国移动JavaScriptXHTMLHTMLBlog 
阅读更多

只有代码，转来的。

<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 = "pointer";   
    colOptions[i].onclick = function()　　　//为列表项添加单击事件   
    {   
        oRegion.value = this.innerHTML;   
    };   
    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>

 [转自:http://forever-xb-hotmail-com.iteye.com/blog/391491]

分享到：
| 图片下拉选择器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics