请问：怎么使select下拉列表可以编辑？

<!--Part code come from :http://us.f901.mail.yahoo.com/ym/Compose?YY=123456-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK：支持民族工业，尽量少买Ｘ货</title><style>/* Common elements */
body{font:small/1.2em arial,helvetica,clean,sans-serif;font:x-small;}
table{font-size:inherit;font:x-small;}
/* Options Templates */
.ac_menu{border:1px solid #3162A6;background-color:#F6F6F6;cursor:default;overflow:hidden;-moz-box-sizing:border-box;
height:expression((this.scrollHeight>210)?"210px":"auto")}
.ac_menuitem{width:100%;color:#141414;padding:2px;cursor:pointer;cursor:hand;}
.ac_menuitem_selected{background-color:#D6DEEC;width:100%;color:#141414;padding:2px;cursor:pointer;cursor:hand;}</style>
<script language=javascript>var tofieldListArray=["[email protected]","深圳市科技园","深圳市罗湖东门","深圳市罗\"湖东门","深圳市罗'湖东门","[email protected]","[email protected]",
"[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","深圳市科技园",
"深圳市罗湖东门","深圳市罗\"湖东门","深圳市罗'湖东门","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]",
"[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","深圳市科技园","深圳市罗湖东门","深圳市罗\"湖东门","深圳市罗'湖东门","[email protected]",
"[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","深圳市科技园",
"深圳市罗湖东门","深圳市罗\"湖东门","深圳市罗'湖东门","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","[email protected]",
"[email protected]","[email protected]","[email protected]","[email protected]","[email protected]","深圳","a@"];
var ccfieldListArray=tofieldListArray;</script> 
 
<script language=javascript> var AC_TAB = 9; // make the selection
var AC_ENTER = 13;  // make the selection
var AC_UP_ARROW = 38;    // move the drop down list selection up by one
var AC_DOWN_ARROW = 40;  // move the drop down list selection down by one var theListDiv;
var theListArray;
var theComboxObj; onload=OnLoad
function OnLoad()
{
    setTimeout("Initialize()", 100);
} function Initialize()
{
AddListDivFun(document.all.tofield);
AddListDivFun(document.all.ccfield);
}

function AddListDivFun(obj)
{
theListArray=eval(obj.id+"ListArray");
var tempStr=new Array();
var tempI=0;
tempStr[tempI++]='<DIV style="position:relative;visibility:hidden">'
+'<DIV class=ac_menu id="'+obj.id+'ListDiv" style="FONT-SIZE: 0.9em; Z-INDEX: 1; visibility:hidden; POSITION: absolute;OVERFLOW-Y:auto; WIDTH:'+obj.offsetWidth+'; " '
+'onmouseover="mouseOverListDivFun(event)" onmouseout="mouseOutListDivFun(event);" onmousedown="mouseDownListDivFun(event);">';
for(var i=0;i<theListArray.length;i++)
tempStr[tempI++]='<DIV class=ac_menuitem  value='+i+' >'+htmlEncode(theListArray[i])+'</DIV>';
tempStr[tempI++]="</DIV></DIV>";
obj.insertAdjacentHTML("afterEnd",tempStr.join(""));
theListDiv=eval(obj.id+"ListDiv");
obj.onfocus=AC_OnFocus;
obj.onblur=AC_OnBlur;
obj.onkeydown=AC_OnKeyDown;
obj.autoComplete="off";
obj.onpropertychange=AC_OnPropertyChange;
}

function AC_OnFocus(obj)
{
if(obj==null) obj=event.srcElement;
theListDiv=eval(obj.id+"ListDiv");
theListArray=eval(obj.id+"ListArray");
theComboxObj=obj;
theListDiv.style.visibility="visible";
adjustListDivScroll();
}

function AC_OnBlur(obj)
{
if(obj==null) obj=event.srcElement;
if(theListDiv.contains(document.activeElement)) obj.focus();
else theListDiv.style.visibility="hidden";
}

function AC_OnPropertyChange(obj)
{
if(obj==null) obj=event.srcElement;
theListDiv=eval(obj.id+"ListDiv");
if(theListDiv==null) return ;
theListArray=eval(obj.id+"ListArray");
var theListDivChildren=theListDiv.children;
theListDiv.selectedIndex=-1;
var theFirstVisibleIndex=-1;
var objValue=obj.value;
for(var i=0;i<theListArray.length;i++)
{
if(theListArray[i].indexOf(objValue)==0)
{
if(theFirstVisibleIndex==-1) theFirstVisibleIndex=i;
theListDivChildren[i].className="ac_menuitem";
theListDivChildren[i].style.display="";
theListDivChildren[i].innerHTML="<b>"+htmlEncode(objValue)+"</b>"+htmlEncode(theListArray[i].substr(objValue.length));//这一句可以省略以节约资源
}
else
theListDivChildren[i].style.display="none";
if(theListDiv.selectedIndex==-1 && theListArray[i]==objValue) theListDiv.selectedIndex=i;
}
if(theListDiv.selectedIndex==-1 && theFirstVisibleIndex!=-1) 
{
theListDiv.selectedIndex=theFirstVisibleIndex;
}
if(theListDiv.selectedIndex!=-1) theListDivChildren[theListDiv.selectedIndex].className="ac_menuitem_selected";
adjustListDivScroll();
}

function AC_OnKeyDown(obj)
{
if(theListDiv==null) return ;
if(obj==null) obj=event.srcElement;
var keyCode=event.keyCode;
if(keyCode==AC_ENTER) keyCode=event.keyCode=AC_TAB;
if(keyCode==AC_TAB && theListDiv.selectedIndex!=-1) 
{
obj.value=theListArray[theListDiv.selectedIndex];
return ;
}

if(keyCode==AC_UP_ARROW && theListDiv.selectedIndex!=-1)
{
for(var i=theListDiv.selectedIndex-1;i>-1;i--)
{
if(theListDiv.children[i].style.display!="none")
{
theListDiv.children[theListDiv.selectedIndex].className="ac_menuitem";
theListDiv.selectedIndex=i;
theListDiv.children[theListDiv.selectedIndex].className="ac_menuitem_selected";
adjustListDivScroll();
break;
}
}
}

if(keyCode==AC_DOWN_ARROW && theListDiv.selectedIndex!=-1)
{
for(var i=theListDiv.selectedIndex*1+1;i<theListDiv.children.length;i++)
{
if(theListDiv.children[i].style.display!="none")
{
theListDiv.children[theListDiv.selectedIndex].className="ac_menuitem";
theListDiv.selectedIndex=i;
theListDiv.children[theListDiv.selectedIndex].className="ac_menuitem_selected";
adjustListDivScroll();
break;
}
}
return;
}

}

function htmlEncode(str)
{
if(str==null) return "";
str=str.replace(/</ig,"&lt;")
str=str.replace(/>/ig,"&gt;");
str=str.replace(/"/ig,"&quot;");
return str;
}

function mouseOverListDivFun(event)
{
if(event.toElement!=theListDiv) event.toElement.style.backgroundColor="#E6E6E6";
}

function mouseOutListDivFun(event)
{
if(event.fromElement!=theListDiv) event.fromElement.style.backgroundColor="";
}

function mouseDownListDivFun(event)
{
var selectedStr="";
if(event.srcElement==theListDiv) return;
else if(event.srcElement.tagName=="B") selectedStr=theListArray[event.srcElement.parentElement.value] ;
else selectedStr=theListArray[event.srcElement.value];
theComboxObj.value=selectedStr;
theComboxObj.blur();
}
function adjustListDivScroll()
{
if ( theListDiv==null || theListDiv.selectedIndex==-1 ) return ;
var i=theListDiv.selectedIndex;
if((theListDiv.children[i].offsetTop<theListDiv.scrollTop)||(theListDiv.children[i].offsetTop>theListDiv.scrollTop+200))
theListDiv.scrollTop=theListDiv.children[i].offsetTop-95;
}

</script>
</head> 
<body >
   
<form name="Compose" id="Compose" method=post action="/ym/Compose?YY=61185"><table cellpadding=4 cellspacing=0 border=0 width="100%">
<tr>
<td >Mail To:</td>
<td style="padding-top:0px;" >
<input name="To" style="width:300" tabindex="1" id="tofield" value="深圳" >
</td>
</tr>
<tr>
<td >Mail Cc:</td>
<td style="padding-top:0px;" >
<input name="Cc" style="width:300" tabindex="1" id="ccfield" value=a >
</td>
</tr>
<tr>
<td colspan=2>若需要不被select档住的可输入下拉框，请联系<a href="mailTo:[email protected]?subject=About%20Editable%20Select">JK本人</a>
<br>------(只是想统计一下有没有人在真正使用)</td>
</tr>
</table>
</form>
</body>
</html>  

解决方案 »

  1.   

    select中不仅可以有预先定义的option，而且可以在
    select中手工输入新的其它内容。
    这样不仅可以把预先定义的option的内容提交，也可以提交手工新输入的内容。  
    ---------------------------------------------------------------  
     
    http://webfx.eae.net/dhtml/combobox/combo_demo.htm  
    ---------------------------------------------------------------  
     
    http://www.csdn.net/develop/Read_Article.asp?Id=15197  
    ---------------------------------------------------------------  
     
    <html>  
     
    <head>  
    <meta  http-equiv="Content-Type"  content="text/html;  charset=gb2312">  
    <title>可输入的select</title>  
    <style>  
    .optionForSel  {font-size:9pt}  
    </style>  
    </head>  
     
    <body    leftmargin="50"  topmargin="50">  
     
    <table  cellpadding="0"  cellspacing="0"  border="0"  width="300">  
               <tr>  
                           <td  id="selectLength"  width="100%"  style="height:20px;padding:0px;border:2px  inset  #404040;border-right:0px;border-bottom:1px  solid  #D4D0C8;font-size:9pt;">  
                                       <div  id="selectedValue"  style="padding:2px;border:0px;width:100%;height:20px;font-size:9pt;vertical-align:bottom"></div>  
                           </td>  
                           <td  width="20"  style="height:20px;padding:0px;border-top:2px  inset  #404040;border-left:0px;border-right:1px  solid  #D4D0C8;border-bottom:1px  solid  #D4D0C8;font-size:9pt">  
                                       <img  src="images/button2.gif"  border="0"  id="mm"  onclick="mm_Click()"  align="absmiddle"  width="18"  height="18">  
                           </td>  
               </tr>  
    </table>  
    <div  id="dropdownOption"  style="position:absolute;visibility:hidden;width:100%;border:1px  solid  #080808;z-index:10">  
               <table  width="100%"  cellpadding="0"  cellspacing="1"  class="optionForSel"  bgcolor="White">  
                           <tr>  
                                       <td  onmouseover="this.style.backgroundColor='#0099ff'"  onmouseout="this.style.backgroundColor=''"  onclick="document.all.selectedValue.innerText=this.innerText">  
                                                   Visit1  
                                       </td>  
                           </tr>  
                           <tr>  
                                       <td  onmouseover="this.style.backgroundColor='#0099ff'"  onmouseout="this.style.backgroundColor=''"  onclick="document.all.selectedValue.innerText=this.innerText">  
                                                   Visit2  
                                       </td>  
                           </tr>  
                           <tr>  
                                       <td  onmouseover="this.style.backgroundColor='#0099ff'"  onmouseout="this.style.backgroundColor=''"  onclick="document.all.selectedValue.innerText=this.innerText">  
                                                   Visit3  
                                       </td>  
                           </tr>  
               </table>  
    </div>  
     
    <script>  
    function  mm_Click(){  
               if  (document.all.dropdownOption.style.visibility  ==  'visible')  
                           document.all.dropdownOption.style.visibility  =  'hidden'  
               else  
                           document.all.dropdownOption.style.visibility  =  'visible'  
    }  
     
    function  init(){  
               document.all.dropdownOption.style.width  =  document.all.selectLength.clientWidth  +  22;  
               document.all.selectedValue.contentEditable  =  true;  
               var  strTop  =  0;  
               var  strLeft  =  0;  
               var  e1  =  document.all.selectLength;  
               while(e1.tagName  !=  "BODY"){  
                           strTop  +=  e1.offsetTop  
                           strLeft  +=  e1.offsetLeft  
                           e1  =  e1.offsetParent  
               }  
               document.all.dropdownOption.style.top  =  String(strTop  +  24)  +  "px";  
               document.all.dropdownOption.style.left  =  String(strLeft)  +  "px";  
    }  
     
    function  clickE(){  
               if(window.event.srcElement.id  !='mm')  
                           document.all.dropdownOption.style.visibility  =  'hidden';  
    }  
     
    document.onclick  =  clickE  
    window.onload  =  init  
    </script>  
    <br>  
    <br>  
    <input  type="button"  value="得到选中的值"  onclick="alert(document.all.selectedValue.innerText)">  
     
    </body>  
    </html>
      

  2.   

    <input type=text name=re_name style="width:100px;height:22px;font-size:10pt;"><span style="width:18px;"><select name="r00" style="margin-left:-100px;width:118px; background-color:#FFEEEE;" onChange="document.all.re_name.value=this.value;">
                    <option value="aaa">aaa</option>
                    <option value="bbb">bbb</option>
                    <option value="ccc">ccc</option>
                    <option value="ddd">ddd</option>
                    <option value="eee">eee</option>
                  </select>
                  </span>
      

  3.   

    To: BILLSJONE(BILL_JONE)
    你的方法太牛了！！！如此地简洁明了！！！
    仰视中！！！
      

  4.   

    代码好多，不过一般都是用DIV做模拟 :)