现有一高难度的需求：页面上有若干个文本框，当用户点击某文本框时，在文本框的位置显示一下拉列表让用户选择，当选择某项并离开下拉列表

<input type=text onfocus="Select1ID.style.visibility='';">
<select id="Select1ID" style="visibility:hidden" onblur="this.style.visibility='hidden';">
<option>1</option>
<option>2</option>
</select>
<br>
<input type=text onfocus="Select2ID.style.visibility='';">
<select id="Select2ID" style="visibility:hidden" onblur="this.style.visibility='hidden';">
<option>1</option>
<option>2</option>
</select>

解决方案 »

  1.   

    基本原理就是鼠标单击事件响应，display样式转换，下拉列表选中事件处理
      

  2.   

    我的需求是select下拉控件是根据用户选择不同的文本框来动态生成的，所以在页面的脚本中会生成一些生成下拉列表的数组内容，然后根据用户选择文本框来生成不现的下拉列表供用户选择。
      

  3.   

    利用XMLHTTP实现的二级连动Select.这是继 "利用XMLHTTP无刷新获取数据" 的另一篇关于XMLHTTP的应用.
    关于XMLHTTP.可以说,是一个很好的接合剂.把客户端和服务端的距离拉近了.
    利用XMLHTTP.我们可以实现很多好的想法.这文章.实现了二级连动Select.
    传统二级连动是把所有的数据都传到有客户端..
    利用XMLHTTP.我们可以实时地返回我们所需要的数据.
    select.htm程序代码： 
    <script language="JavaScript">
    function GetResult(str)
    {
    /*
     *--------------- GetResult(str) -----------------
     * GetResult(str) 
     * 功能:通过XMLHTTP发送请求,返回结果.
     * 参数:str,字符串,发送条件.
     * 实例:GetResult(document.all.userid.value);
     * author:wanghr100(灰豆宝宝.net)
     * update:2004-5-27 19:02
     *--------------- GetResult(str) -----------------
     */
        var oBao = new ActiveXObject("Microsoft.XMLHTTP");
        oBao.open("POST","Server.asp?sel="+str,false);
        oBao.send();
        //服务器端处理返回的是经过escape编码的字符串.
        //通过XMLHTTP返回数据,开始构建Select.
        BuildSel(unescape(oBao.responseText),document.all.sel2)
    }function BuildSel(str,sel)
    {
    /*
     *--------------- BuildSel(str,sel) -----------------
     * BuildSel(str,sel) 
     * 功能:通过str构建Select.
     * 参数:str,字符串,由服务端返回的.有特定结构"字符串1,字符串2,字符串3"
     * 参数:sel,要构建的Select
     * 实例:BuildSel(unescape(oBao.responseText),document.all.sel2)
     * author:wanghr100(灰豆宝宝.net)
     * update:2004-5-27 19:02
     *--------------- BuildSel(str,sel) -----------------
     */
        //先清空原来的数据.
        sel.options.length=0;
        var arrstr = new Array();
        arrstr = str.split(",");
        //开始构建新的Select.
        for(var i=0;i<arrstr.length;i++)
        {
            sel.options[sel.options.length]=new Option(arrstr[i],arrstr[i])
        }
    }
    </script>
    <select name="sel" onChange="GetResult(this.value)">
    <option value="">请选择
    <option value="福建省">福建省
    <option value="湖北省">湖北省
    <option value="辽宁省">辽宁省
    <select>
    <select name="sel2"></select>  
     server.asp  服务器端处理.
    程序代码： 
    <% @Language="JavaScript" %>
    <%
    function OpenDB(sdbname)
    {
    /*
     *--------------- OpenDB(sdbname) -----------------
     * OpenDB(sdbname) 
     * 功能:打开数据库sdbname,返回conn对象.
     * 参数:sdbname,字符串,数据库名称.
     * 实例:var conn = OpenDB("database.mdb");
     * author:wanghr100(灰豆宝宝.net)
     * update:2004-5-12 8:18
     *--------------- OpenDB(sdbname) -----------------
     */
        var connstr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source="+Server.MapPath(sdbname);
        var conn = Server.CreateObject("ADODB.Connection");
        conn.Open(connstr);
        return conn;
    }
    var oConn = OpenDB("data.mdb");
    var province = Request("sel");
    var arrResult = new Array();
    var sql = "select city from china where province='"+province+"'";
    var rs = Server.CreateObject("ADODB.Recordset");
    rs.Open(sql,oConn,1,1);
    while(!rs.EOF)
    {
        //遍历所有适合的数据放入arrResult数组中.
        arrResult[arrResult.length] = rs("city").Value;
        rs.MoveNext();
    }
    //escape解决了XMLHTTP。中文处理的问题.
    //数组组合成字符串.由","字符串连接.
    Response.Write(escape(arrResult.join(",")));
    %> 
     数据库设计
    data.mdb
    表china.
    字段
    id  自动编号
    province 文本
    city  文本表:china 数据: 
    id province city
    1 福建省  福州市
    2 福建省  厦门市
    3 福建省  泉州市
    4 湖北省  武汉市
    5 湖北省  荆州市
    6 湖北省  宜昌市
    7 辽宁省  沈阳市
    8 辽宁省  大连市
    9 辽宁省  盘锦市
      

  4.   

    帮你改了一下,在代码里有注释.修改意见.
    文本框的点击事件改成获取焦点事件.
    可以通过下接框的变化来给文本框传值.<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>test</title>
    <script language=javascript>
      var address = new Array("北京","上海","重庆","香港","台北","成都");
      function getSel(selOption,selText,obj){
         if(selText==null) return "";
         var selHtml = "<SELECT NAME='selOpt' onchange=getValue(this.value)>";
    //这地方在选择后如何让obj对象的值为所选择的值?
         var len = selText.length;
         for(var i=0;i<len;i++){
            selHtml += "<OPTION VALUE='"+selOption[i]+"'>"+selText[i]+"</OPTION>";
         }
         selHtml += "</SELECT>";
         document.all.sel.innerHTML = selHtml;
         //存储对象.
         oOld = obj;
      }//全局变量,取得文本获取焦点的对象.
    var oOld = null;
    function getValue(o)
    { 
        //下拉框值变化时,把值传到文本框.
        var sel = document.all.selOpt;
        str = sel.options[sel.options.selectedIndex].value;
        oOld.value = str;
    }
    </script>
    </head><body>
    <form name="test">
    <table border="1" width="300" cellpadding="0" cellspacing="0">
    <tr><Td>
    <input type="text" name="txt1" value="1" onfocus="getSel(address,address,this)"  ></td></tr>
    <tr><Td><input type="text" name="txt2" value="1" onfocus="getSel(address,address,this)"></td></tr><tr><Td><input type="text" name="txt3" value="1" onfocus="getSel(address,address,this)"></td></tr>
    <tr><Td><input type="text" name="txt4" value="1" onfocus="getSel(address,address,this)"></td></tr>
    </table>
    <div id="sel"></div>
    </form>
    </body></html>
      

  5.   

    To:wanghr100(灰豆宝宝.net)
    我要的就是这种效果，但<DIV id="sel"></DIV>的显示位置还不对，比如第二个文本框获得焦点时，需要<DIV id="sel"></DIV>在第二个文本框的位置上显示，即下拉列表处在文本框的上面显示。当失去焦点时，下拉列表就消失而显示文本框。
      

  6.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>test</title>
    <script language=javascript>
    function hide()
    {
      document.all('txt1').style.display='none';
      document.all('select1').style.display='';
    }
    function show()
    {
      document.all('txt1').style.display='';
      document.all('txt1').value=document.all('select1').options[document.all('select1').options.selectedIndex].value;
      document.all('select1').style.display='none';
    }
    </script>
    </head><body>
    <form name="test">
    <table border="1" width="300" cellpadding="0" cellspacing="0">
    <tr><Td>
    <input type="text" id="txt1" name="txt1" value="1" onfocus="hide()" >
    <select id='select1' onchange=show() style="display:none">
    <option value='1'>1</option>
    <option value='2'>2</option>
    </select>
    </td></tr>
    <tr><Td><input type="text" name="txt2" value="1" ></td></tr><tr><Td><input type="text" name="txt3" value="1" ></td></tr>
    <tr><Td><input type="text" name="txt4" value="1" ></td></tr>
    </table>
    <div id="sel"></div>
    </form>
    </body></html>
    简单方法实现的。就做了一个文本框。
      

  7.   

    改良了一下。<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>test</title>
    <script language=javascript>
    function hide(num)
    {  txt=document.all('txt'+num.toString());
      select=document.all('select'+num.toString());
      txt.style.display='none';
      select.style.display='';
      select.focus();
    }
    function show(num)
    {
      txt=document.all('txt'+num);
      select=document.all('select'+num);
      txt.style.display='';
      txt.value=select.options[select.options.selectedIndex].value;
      select.style.display='none';
    }
    </script>
    </head><body>
    <form name="test">
    <table border="1" width="300" cellpadding="0" cellspacing="0">
    <tr><Td>
    <input type="text" id="txt1" name="txt1" value="1" onfocus="hide('1')" style="width:90">
    <select id='select1' onchange=show('1') style="display:none" style="width:90" onBlur="show('1')">
    <option value='1'>1</option>
    <option value='2'>2</option>
    </select>
    </td></tr>
    <tr><Td><input type="text" name="txt2" value="1"  onfocus="hide('2')" style="width:90">
    <select id='select2' onchange=show('2') style="display:none" style="width:90" onBlur="show('2')">
    <option value='3'>3</option>
    <option value='4'>4</option>
    </select>
    </td></tr><tr><Td><input type="text" name="txt3" value="1" ></td></tr>
    <tr><Td><input type="text" name="txt4" value="1" ></td></tr>
    </table>
    </form>
    </body>
      

  8.   

    基本能实现，但有点bug，下拉列表出来后，第一次选择时，下拉列表又消失了，必须再点一次才行，
    其实我的需求只要能实现如何将<DIV>的位置根据用户所选择的文本框的位置而移动，并且大小等于用户所选择文本框的大小。只是我至今无法实现位置移动和大小控制。还望各位高手给予提示。谢谢！