962
windows
文本框獲取焦點並彈出下拉框
html xmlns="https://www.w3.org/1999/xhtml" > <head> <title>標題頁</title> </head> <body> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td>所屬區域</td> <td> <input type="text" /> <div > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <div > <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" mce_>關閉</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; oDivList.style.posTop = oDivList.offsetTop + this.offsetHeight; oDivList.style.posLeft = oDivList.offsetLeft - this.offsetWidth - 8; } }; // --></mce:script> </body> </html>
最後更新：2017-04-02 04:00:23