當(dāng)前位置：首頁 > 長沙網(wǎng)站建設(shè) > 用文本框彈出下拉框

用文本框彈出下拉框

優(yōu)度網(wǎng)絡(luò) 2009/5/19 4754

長沙網(wǎng)站建設(shè) 長沙網(wǎng)絡(luò)公司長沙建網(wǎng)站長沙網(wǎng)站推廣公司

</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>所屬區(qū)域</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>華北地區(qū)</b>
                                <li>北京</li>
                                <li>天津</li>
                                <li>內(nèi)蒙古</li>
                                <li>河北</li>
                                <li>河南</li>
                            </ul>
                            <ul><b>華東地區(qū)</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");　　　//關(guān)閉div的單元格，也可使用按鈕實現(xiàn)
var colOptions = document.getElementsByTagName("li"); //所有列表元素
var bNoAdjusted = true;
oClose.onclick = function()
{
    oDivList.style.display = "none";　　//隱藏div，實現(xiàn)關(guān)閉下拉框的效果
};
//設(shè)置下列選擇項的一些事件
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是否已經(jīng)顯示的變量
    {
        bNoAdjusted = false;
        //設(shè)置下拉列表的寬度和位置
        oDivList.style.width = this.offsetWidth + 50;
        oDivList.style.posTop = oDivList.offsetTop + this.offsetHeight;
        oDivList.style.posLeft = oDivList.offsetLeft - this.offsetWidth - 8;
    }
};
</script>
</body>
</html>