100分，在线求一效果，当一个文档框获得一个焦点时，在文本框的正下方显示一个div,

JS 实现很容易，省市县三级联动的 Ajax 例子太多了，随便一搜就是上千个！俺先去写个简单实现，就算抛砖引玉吧！稍后贴出来！

解决方案 »

  1.   

    <SCRIPT LANGUAGE="JavaScript">function strPage(a)
    {
    document.getElementById('diva').style.display=""
    document.getElementById('diva').style.left=a.offsetLeft+'px'
    document.getElementById('diva').style.top=a.offsetTop+ a.offsetHeight+'px'
    }
    </SCRIPT><input type="text" width="30px" onfocus="strPage(this)">
    <div id="diva" style="overflow-y:auto;height:25px;width:35px;display:none;position:absolute">
    1111111111
    222222222
    1111111111
    222222222
    1111111111
    222222222
    1111111111
    222222222
    </div>
    <input type="text" width="30px" >
      

  2.   

    用 JS 实现以下 4 点功能，IE 6 下测试正常！1 div的宽度和文本框宽度相同，2 长度固定（若div内的内容过长，则可显示滚动条），3 当点击div中的文字时，将文字输入到文本框中，4 div标签的显示与效果图相似，但样式表及实现原理不同。至于那个树完全可以用 ul 和 li 的多级嵌套实现，网上有不少例子，LZ 动手搜搜吧！代码如下， L@_@K： <body>
     <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>所属区域</td>
            <td><input type="text" id="txtRegion" />
                <div id="divRegionList" style="display: none; border: 1px solid #0000ff; overflow: hidden; height: 150px; position: absolute; background-color: #ff0000;">
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                            <div style="overflow: auto; width: 100%; height: 132px; background-color: #90EE90;">
                            <ol>
                                <li>北京</li>
                                <li>天津</li>
                                <li>上海</li>
                                <li>重庆</li>
                                <li>河北</li>
                                <li>河南</li>
                                <li>山东</li>
                                <li>山西</li>
                                <li>江西</li>
                                <li>江苏</li>
                                <li>浙江</li>
                                <li>内蒙古</li>
                            </ol>
                            </div>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" id="tdClose" style="cursor: hand; background-color: #ff8888;">Close</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
        <tr>
            <td>状态</td>
            <td><input type="text" id="txtState" /></td>
        </tr>
     </table>
    <script type="text/javascript">
    <!--var oRegion = document.getElementById("txtRegion");
    var oRegionList = document.getElementById("divRegionList");
    var oClose = document.getElementById("tdClose");
    var colOptions = document.getElementsByTagName("li");
    var bNoAdjusted = true;oClose.onclick = function()
    {
        oRegionList.style.display = "none";
    };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()
    {
        oRegionList.style.display = "block";
        if (bNoAdjusted)
        {
            bNoAdjusted = false;
            oRegionList.style.width = this.offsetWidth - 2;
            oRegionList.style.posTop = oRegionList.offsetTop + this.offsetHeight;
            oRegionList.style.posLeft = oRegionList.offsetLeft - this.offsetWidth - 8;
        }
    };
    //-->
    </script>
     </body>
      

  3.   

    简单调整了一下 html 代码，L@_@K <body>
     <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>所属区域</td>
            <td><input type="text" id="txtRegion" />
                <div id="divRegionList" style="display: none; border: 1px solid #0000ff; overflow: hidden; height: 150px; position: absolute; background-color: #ff0000;">
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                            <div style="overflow: auto; width: 100%; height: 132px; background-color: #90EE90;">
                            <ul><b>中国</b>
                                <ul><b>华北地区</b>
                                    <li>北京</li>
                                    <li>天津</li>
                                    <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>
        <tr>
            <td>状态</td>
            <td><input type="text" id="txtState" /></td>
        </tr>
     </table>
    <script type="text/javascript">
    <!--var oRegion = document.getElementById("txtRegion");
    var oRegionList = document.getElementById("divRegionList");
    var oClose = document.getElementById("tdClose");
    var colOptions = document.getElementsByTagName("li");
    var bNoAdjusted = true;oClose.onclick = function()
    {
        oRegionList.style.display = "none";
    };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()
    {
        oRegionList.style.display = "block";
        if (bNoAdjusted)
        {
            bNoAdjusted = false;
            oRegionList.style.width = this.offsetWidth + 50;
            oRegionList.style.posTop = oRegionList.offsetTop + this.offsetHeight;
            oRegionList.style.posLeft = oRegionList.offsetLeft - this.offsetWidth - 8;
        }
    };
    //-->
    </script>
     </body>