文本框获取焦点弹出下拉框
只有代码，转来的。<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.style.cursor = "pointer"; colOptions.onclick = function() //为列表项添加单击事件 { oRegion.value = this.innerHTML; }; colOptions.onmouseover = function() //为列表项添加鼠标移动事件 { this.style.backgroundColor = "#ffff00"; }; colOptions.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]
页:
[1]