`

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

中国移动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]

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

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

相关推荐

    《程序天下：JavaScript实例自学手册》光盘源码

    3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 ...

    layui当点击文本框时弹出选择框,显示选择内容的例子

    在本文中，我们将深入探讨如何使用layui框架在文本框被点击时弹出一个选择框，以便用户能够选择并显示相关内容。layui是一个轻量级的前端UI框架，它提供了丰富的组件和便捷的API，使得开发更加高效。以下是实现这一...

    程序天下:JavaScript实例自学手册

    3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 ...

    C# 自定义输入对话框。需要的请带走。技术不复杂，对您有参考意义就是我最大的贡献。

    9. **扩展性**：如果你的输入对话框需要支持多种类型的输入，可以考虑添加下拉框（`ComboBox`）或复选框（`CheckBox`）等其他控件，或者设计可配置的接口，允许在运行时动态改变对话框的结构。 10. **代码组织**：...

    C#实现的QQ登录器

    如果为空，`OpenFileDialog`会弹出，让用户选择QQ客户端的安装位置。选择后，路径被赋值给`ui.Path`，然后调用`LoginQQ`方法尝试登录。如果路径已存在，`LoginQQ`方法会直接被调用，尝试使用提供的参数登录QQ。 ...

    林林宾馆管理信息系统

    例如，当用户选择一个房间号，系统会执行SQL查询来获取与该房间相关的未被占用的信息，如房间类型、价格等，并将这些信息填充到其他下拉框和文本框中。这里的SQL语句是动态构建的，展示了如何在VB中使用ADODB组件来...

    数据库系统源代码.pdf

    - 在执行查询之前，检查`ComboBox1`和`Edit2`是否为空，如果为空则弹出提示，并将焦点设回输入框，避免无效的查询。 7. **异常处理**： - 使用`try...except`结构来捕获可能出现的异常，如登录失败或数据库操作...

    《JavaScript实例精通》[源代码]

    18_7.htm 下拉框的值同时给文本框和文本域。 18_8.htm 基于jQuery的折叠菜单。 18_9.htm 可编辑的表格数据。 第19章（\19） 示例描述：其他特效。 19_1.htm 中文日期。 19_2.htm 现在的日期及星期。 19_3...

    JavaScript实例精通

    18_7.htm 下拉框的值同时给文本框和文本域。 18_8.htm 基于jQuery的折叠菜单。 18_9.htm 可编辑的表格数据。 第19章（\19） 示例描述：其他特效。 19_1.htm 中文日期。 19_2.htm 现在的日期及星期。 19_3...

    JAVA必备英文单词.docx

    81. **PopupMenu (弹出菜单)**：在鼠标点击或其他事件后弹出的菜单。 82. **Dialog (对话框)**：独立于主窗口的小窗口，用于与用户交互。 83. **Message (消息)**：向用户显示信息的对话框。 84. **Icon (图标)**...

    JAVA编程中常用的英文单词词汇汇总.doc

    88. **PopupMenu**: 弹出菜单，通常在鼠标右击时出现。 89. **Dialog**: 对话框，独立于主窗口的小窗口，用于收集用户信息或显示消息。 90. **Message**: 消息，通常在对话框中显示的文本。 91. **Icon**: 图标，...

    C# for CSDN 乱七八糟的看不懂

    预定义类型 下表列出了预定义类型，并说明如何使用。 类型 object 说明 所有其他类型的最终 基类型 字符串类型； 字符串是 Unicode 字符序列 8 位有符号整型 16 位有符号整型 32 位有符号整型 64 位有符号整型 示例...

    js使用小技巧

    获取选中内容 document.selection.createRange().duplicate().text 自动完成功能 打开该功能 关闭该功能 窗口最大化 (window.screen.width - 4,window.screen.height-50);window.moveTo(-4,-4)"&gt; 无关闭...

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