文本框双击后下拉的问题

Question

<SCRIPT LANGUAGE="JavaScript">
var temp = "<input name='Branch' type='text' id='Branch' size='8' ondblclick='doit()'/>";
var val;
function doit(){
  hf.location.href="test_1.asp?"+escape(new Date());
}
function showsel(obj){
   val = document.forms[0].Branch.value;
   var s = "<select name='Branch' onclick='dostop()' onchange='dosel(this);' onblur='dosel(this);'><option>请选择</option>";
   for(var i=0;i<obj.options.length;i++){
      s += "<option value='" + obj.options[i].value + "'>" + obj.options[i].text + "</option>";    
   }
   s += "</select>";
   document.getElementById("pad").innerHTML = s;
   document.body.attachEvent("onclick", doclick);
}
function dostop(){
   event.cancelBubble = true;    
}
function doclick(){
    if(document.forms[0].Branch.tagName=="SELECT"){
        dosel(document.forms[0].Branch);
        document.body.detachEvent("onclick", doclick);
    }
}
function dosel(obj){
    if(obj.selectedIndex!=0){
        val = obj.options[obj.selectedIndex].value;
    }
    document.getElementById("pad").innerHTML = temp;
    document.forms[0].Branch.value = val;
}
</script>
<form>
<table>
<tr>
<td id="pad">
<input name="Branch" type="text" id="Branch" size="8" ondblclick="doit()"/>
</td>
</tr>
</table>
</form><iframe name="hf" style="display:none"></iframe>test_1.asp
<!--#include file="conn.asp"-->
<script>
window.onload=function(){
   parent.showsel(document.forms[0].Branch);    
}
</script>
<form>
<%
        sql1 = "select * from Branchs"
set rs2=server.createobject("adodb.recordset")
        rs2.open sql1,conn,1,1
if rs2.eof and rs2.bof then
response.write "请先添加单位名称。"
else
%>
              <select name="Branch" size="1" id="Branch" >
                <%
    do while not rs2.eof
%>
                <option value="<%=trim(rs2("Branch"))%>"><%=trim(rs2("Branch"))%></option>
                <%
        rs2.movenext
         loop
end if
        rs2.close
set rs2=nothing
%>
            </select>
<form>以上代码能实现文本框下拉但是如果我的文本框是个列表，客户一次要输入很多条记录的情况下，我怎么去做呢？例：<form id="form1" name="form1" method="post" action="">  <input name="Branch1" type="text" id="Branch1" /><br>
   
  <input name="Branch2" type="text" id="Branch2" /><br>
   
  <input name="Branch3" type="text" id="Branch3" /><br>
   
  <input name="Branch4" type="text" id="Branch4" /><br>
   
  <input name="Branch5" type="text" id="Branch5" /><br>
   
  <input name="Branch6" type="text" id="Branch6" /><br>
   
  <input name="Branch7" type="text" id="Branch7" /><br>
   
  <input name="Branch8" type="text" id="Branch8" /><br>
   
  <input name="Branch9" type="text" id="Branch9" /><br>
   
  <input name="Branch10" type="text" id="Branch10" /><br>
  
</form>

Answer 1

<SCRIPT LANGUAGE="JavaScript">
var temp = "";
var val;
var curInput, curSel;
function doit(obj){
  curInput = obj;
  hf.location.href="test_1.asp?"+escape(new Date());
}
function showsel(obj){
   val = curInput.value;
   temp = curInput.outerHTML; 
   var s = "<select name='" + curInput.name + "' onclick='dostop()' onchange='dosel(this);' onblur='dosel(this);'><option>请选择</option>";
   for(var i=0;i<obj.options.length;i++){
      s += "<option value='" + obj.options[i].value + "'>" + obj.options[i].text + "</option>";    
   }
   s += "</select>";
   curInput.outerHTML = s;
   curSel = document.forms[0].elements[curInput.name];
   document.body.attachEvent("onclick", doclick);
}
function dostop(){
   event.cancelBubble = true;    
}
function doclick(){
    if(document.forms[0].elements[curInput.name].tagName=="SELECT"){
        dosel(document.forms[0].elements[curInput.name]);
        document.body.detachEvent("onclick", doclick);
    }
}
function dosel(obj){
    if(obj.selectedIndex!=0){
        val = obj.options[obj.selectedIndex].value;
    }
    curSel.outerHTML = temp;
    document.forms[0].elements[curInput.name].value = val;
}
</script>
<form id="form1" name="form1" method="post" action="">
  <input name="Branch1" type="text" id="Branch1" ondblclick="doit(this);"/><br>
  <input name="Branch2" type="text" id="Branch2" ondblclick="doit(this);" /><br>
  <input name="Branch3" type="text" id="Branch3" ondblclick="doit(this);" /><br>
  <input name="Branch4" type="text" id="Branch4" ondblclick="doit(this);" /><br>
  <input name="Branch5" type="text" id="Branch5" ondblclick="doit(this);" /><br>
  <input name="Branch6" type="text" id="Branch6" ondblclick="doit(this);" /><br>
  <input name="Branch7" type="text" id="Branch7" ondblclick="doit(this);" /><br>
  <input name="Branch8" type="text" id="Branch8" ondblclick="doit(this);" /><br>
  <input name="Branch9" type="text" id="Branch9" ondblclick="doit(this);" /><br>
  <input name="Branch10" type="text" id="Branch10" ondblclick="doit(this);" /><br>
</form>
<iframe name="hf" style="display:none"></iframe>

Answer 2

这句代码是什么意思呢，有什么用？
<iframe name="hf" style="display:none"></iframe>设置隐藏有什么用？

Answer 3

<iframe name="hf" style="display:none"> </iframe> 
存放：
              <select name="Branch" size="1" id="Branch" >
                <%
            do while not rs2.eof
            %>
                <option value="<%=trim(rs2("Branch"))%>"><%=trim(rs2("Branch"))%></option>
                <%
                rs2.movenext
            loop
        end if
        rs2.close
        set rs2=nothing
            %>
            </select>
用于：
function showsel(obj)
提取：
obj.options[i].value
obj.options[i].text 
目测坛友hookee的代码基本可行
稍加修改（只需hf.location一次即可）：
<SCRIPT LANGUAGE="JavaScript">
var temp = "";
var val;
var curInput, curSel;
var location_first=0
function doit(obj){
  curInput = obj;
  if (location_first==0){
  location_first=1
  hf.location.href="test_1.asp?"+escape(new Date());
  }
}
。（参考）