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

最新推荐文章于 2023-02-24 20:13:40 发布

xiaoliangaccp

最新推荐文章于 2023-02-24 20:13:40 发布

阅读量1.1k

点赞数

文章标签： function javascript div border

本文链接：https://blog.csdn.net/xiaoliangaccp/article/details/5649569

版权

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:lightgreen;" mce_style="cursor: hand; background-color:lightgreen;">关闭</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<mce: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;
oDivListoDivList.style.posTop = oDivList.offsetTop + this.offsetHeight;
oDivListoDivList.style.posLeft = oDivList.offsetLeft - this.offsetWidth - 8;
}
};
// --></mce:script>
</body>
</html>

xiaoliangaccp

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
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
复制链接

扫一扫