求一个JAVASCRIPT代码，可以输入数据的SELECT

<HTML>
 <HEAD>
  <SCRIPT LANGUAGE="javascript">
 </SCRIPT> <SCRIPT LANGUAGE="javascript">
function Body_Init(oSelect,oText)
{
 var iLeft= oSelect.offsetLeft;
 var iTop = oSelect.offsetTop;
 var iWidth=oSelect.clientWidth;
 var iHeight=oSelect.clientHeight;oSelect.style.clip='rect(0,'+iWidth+','+iHeight+','+(iWidth-18)+')';
 
 oText.style.width=iWidth;
 oText.style.height=iHeight;
 oText.style.top =iTop;
 oText.style.left=iLeft;
}
function Combo_Select(oSelect,oText)
{
 oText.value=oSelect.options[oSelect.selectedIndex].text;
 alert(oText.value);
}
function Text_ChkKey(oSelect,oText)
{
 if(event.keyCode==13)
 {
  var nIndex=HasTheValue(oText.value,oSelect);
  if(nIndex !=-1 && nIndex !=oSelect.selectedIndex)
  {
   oSelect.selectedIndex=nIndex;  }
 }
}
function HasTheValue(name,oSelect)
{
 if(oSelect.options.length<1)
  return -1;
 var i=0;
 for(i=0;i<oSelect.options.length;i++)
 {
  if(oSelect.options[i].text==name)
   return i;
 }
 return -1;
} </SCRIPT>
 </HEAD>
 <BODY>
 <table width=50% width=50% align="center" valign="middle">
 <tr><td>
  <SELECT style="position:absolute;"    ONCHANGE="Combo_Select(this,pText)" NAME="pCombo" id="pCombo">
  <option value="d">test1
  <option value="dd">test2  
  </SELECT>
  <INPUT style="position:absolute;"   onKeyPress="Text_ChkKey(pCombo,this)" TYPE="TEXT" NAME="pText" id="pText">
  </td></tr>
  </table>
  <script language="javascript" type="text/javascript">
  <!--
  Body_Init(pCombo,pText);
  //-->
  </script>
  </BODY>
</HTML>

解决方案 »

  1.   

    可以自己注入的select控件 
    观看效果<script src="editableselect.js"></script>
    <select id="EditableSelect">
    <option>可以编辑的select第二版</option>
    <option>Bencalie制作</option>
    </select>=======================
    editableselect.jswindow.onload=function(){
     var objSelect=EditableSelect
     var obj=document.all.EditableSelect
     getTop=obj.offsetTop;
     getLeft=obj.offsetLeft;
     while(objSelect=objSelect.offsetParent){
     getTop+=objSelect.offsetTop;
     getLeft+=objSelect.offsetLeft;
     } var oNewItem=document.createElement("OBJECT"); 
     document.body.insertBefore(oNewItem);
     oNewItem.outerHTML="<object id=editable style=\"z-index:2;position:absolute\" type=\"text/x-scriptlet\" data=\"addin2.htm\"></object>"; editable.style.left=getLeft+1
     editable.style.top=getTop+1
     editable.style.width=obj.offsetWidth-19
     editable.style.height=obj.offsetHeight-3
     
     obj.onchange=function(){editable.str(obj.options[obj.selectedIndex].text)}
     obj.onresize=function(){editable.style.width=obj.offsetWidth-19}
    }function addNewOption(value){
     EditableSelect.options[EditableSelect.length]=new Option(value,value) 
    }=======================
    addin2.htm<script language="vbs">
    function public_str(theStrIn)
     strIn.value=theStrIn
    end function
    </script>
    <body leftmargin=0 topmargin=0>
    <script language="javascript">
    function check(){
    var obj=parent.document.all.EditableSelect
    var theValue=document.all.strIn.value.replace(/^\s*/g,"").replace(/\s*$/g,"")
    if(event.keyCode==13){
    if(theValue!=""){
    for(i=0;i<obj.length;i++)
     if(obj.options[i].text==theValue){
      alert("该选项已经存在！");
      document.all.strIn.focus();
      document.all.strIn.value="";
      return;
     }
    parent.addNewOption(theValue) 
    }
    document.all.strIn.value=""
    }
    }
    </script>
    <input id=strIn style='border:0;width:100%;height:100%;padding-top:2px' onkeydown=check()>
    </body>
     
      
      

  2.   

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style>
    .table1{background-color:white;FONT-FAMILY: Courier New, Courier;font-size:12px}
    .td_out{FONT-FAMILY: Courier New, Courier;font-size:12px;color:#000000;height:15px;border:1 solid #ffffff;}
    .td_over{FONT-FAMILY: Courier New, Courier;font-size:12px;cursor:default;background-color:#3366cc;border:1 solid #000000;color:#ffffff;height:15px}
    .slv{vertical-align:bottom;FONT-FAMILY: Courier New, Courier;font-size:12px;border-left-width:0;border-top-width:0;border-bottom-width:0;border-right:0 solid #000000;vertical-align:middle;height:18px;color:#000000;}
    .down{position:relative;left:-2px;font-size:11px;vertical-align:middle;width:16;height:16;color:#2050b0;background-color:#D0DFF7;border:1 solid #9fA3Ce;writing-mode:tb-rl;font-weight:bold;
    }
    .seldiv{
    position:absolute;z-index:1000;overflow-x:hidden;border-left:1 solid #000000;border-bottom:1 solid #000000;border-right:1 solid #000000;
    SCROLLBAR-FACE-COLOR: #d0dff7; 
    SCROLLBAR-HIGHLIGHT-COLOR: #d0dff7; 
    SCROLLBAR-SHADOW-COLOR: #FFFFFF; 
    SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; 
    SCROLLBAR-ARROW-COLOR: #ffffff; 
    SCROLLBAR-TRACK-COLOR: #ffffff; 
    SCROLLBAR-DARKSHADOW-COLOR: #d0dff7;}
    </style>
    <script language="JavaScript">
    document.onclick=hiddenDiv;
    function getDivCount() {
     var arr=document.all; 
     re=0;
     for (i=0;i<arr.length;i++) {
      str=arr[i].id;  
      if (str.indexOf("ZfDiv_")==0) {   
       re++;  
      }
     } 
     return re;
    }function getI(ObjId) {//取得objId的最后一位数字
     for (i=0;i<ObjId.length;i++) {
      if (ObjId.charAt(i)=="_") return ObjId.substr(i+1,ObjId.length-1);
     }
     return 0;
    }function select_edit(TextObj){//鼠标经过高亮度 
     TextObj.focus();TextObj.select();
    }function checkValue(ID){   
     var sl=document.all["ZfText_"+ID]; 
     var sv=document.all["ZfDiv_"+ID];
     var da=document.all["ZfData_"+ID];   
     sv.style.display=''
     
     for(i=0;i<da.rows.length;i++)da.rows[i].style.display=''
     
     for(i=0;i<da.rows.length;i++){
      if(da.rows[i].cells[0].innerText.indexOf(sl.value)!=0)da.rows[i].style.display='none';
      getPosition(ID);
     } 
    }function getL(e){
     var l=e.offsetLeft;
     while(e=e.offsetParent){
      l+=e.offsetLeft;
     }
     return l
    }
    function getT(e){
     var t=e.offsetTop;
     while(e=e.offsetParent){
      t+=e.offsetTop;
     }
     return t
    }function getPosition(ID){ 
     var sv=document.all["ZfDiv_"+ID];
     var sl=document.all["ZfText_"+ID];
     var spn=document.all["ZfSpan_"+ID];
     var da=document.getElementById("ZfData_"+ID);
     sv.style.pixelWidth=spn.offsetWidth;
     da.style.pixelWidth=sv.offsetWidth;
     sv.style.pixelLeft=getL(spn);
     sv.style.pixelTop=getT(spn)+sl.offsetHeight+3;
     if(da.offsetHeight>200){
      sv.style.pixelHeight=200;
      sv.style.overflowY='scroll';
     }
     else {
      sv.style.pixelHeight=da.offsetHeight;
      sv.style.overflowY='hidden';
     }
    }function dropDown(ID){ 
     var sv=document.all["ZfDiv_"+ID]
     var tb=document.all["ZfData_"+ID]
     
     if(sv.style.display=='none'){  
      sv.style.display='';  
      for(i=0;i<tb.rows.length;i++)tb.rows[i].style.display=''
      getPosition(ID);  
     } else {  
      sv.style.display='none';
     }
    }//下拉摸拟层function hiddenDiv(){
     var o=window.event.srcElement.id;
     var tb 
     var sv 
     if(o=="") {
      for (j=0;j<getDivCount();j++) {
       tb=document.getElementById('ZfData_'+j);
       sv=document.getElementById('ZfDiv_'+j);   
       for(i=0;i<tb.rows.length;i++) tb.rows[i].style.display='';
       sv.style.display='none';   
      }
      
     }}//隐藏模拟层
    function setValue(obj){
    var i=getI(obj.parentElement.parentElement.parentElement.id);
    //alert(obj.parentElement.parentElement.parentElement.id);var sl=document.all["ZfText_"+i];
    var sv=document.all['ZfDiv_'+i];
    sl.value=obj.innerText;
    sv.style.display='none';
    //sldIndex=obj.parentElement.rowIndex;
    }//给文本框赋值function over(obj){
     obj.className="td_over"
     obj.title=obj.innerText
     obj.focus();
    }//鼠标经过变色function out(obj){
     obj.className="td_out"
    }//鼠标离开还原function String.prototype.Trim(){return this.replace(/(^\s*)|(\s*$)/g,'')}//自定义去空格函数Trim()
    //增加list的接口,ID表示该组控件是页面中的第几个
    function add(v,ID){
    var sv=document.all['ZfDiv_'+ID];
    if(!v.Trim()){return;}
    var tb=document.all['ZfData_'+ID];
    var c=tb.insertRow(tb.rows.length).insertCell();
    c.innerHTML='<nobr>'+v.Trim()+'</nobr>';
    c.onmouseover=new Function("over(this)");
    c.onmouseout=new Function("out(this)");
    c.onclick=new Function("setValue(this)");
    c.className="td_out";
    v='';
    }
    //增加inpnubox的接口,在页面中产生一个inputbox控件,下拉列表为空
    function addText(name,DefValue) {
     var i=getDivCount();
     document.write('<span id="ZfSpan_'+i+'" style="border:1 solid #9CA0CB">');
     document.write('<input type="text" value="'+DefValue+'" name="'+name+'" id="ZfText_'+i+'" ondblclick="ZfDrop_'+i+'.click()" class="slv" onmouseover="select_edit(this)"  onkeyup="checkValue('+i+')"><input type=button id="ZfDrop_'+i+'" value=">" onclick="this.hideFocus=true;dropDown('+i+');" class="down" onmouseover="this.style.backgroundColor=#EEF3FD" onmouseout="this.style.backgroundColor=\'\'" onmousedown="this.style.backgroundColor=#ABC4F5" onmouseup="this.style.backgroundColor=\'\'"></span>');
     document.write('<div id="ZfDiv_'+i+'" class="seldiv" style="display:none;"><table id="ZfData_'+i+'" onselectstart="return false" border="0"  cellspacing="0" cellpadding="0" class="table1"></table></div>');
    } </script>
    </head>
    <body><script language="JavaScript">
    addText("name1","a");
    add("1234",0);
    add("1234",0);
    addText("name1","a");
    add("1234",1);
    add("1234",1);
    </script>
    </body>
    </html>
      

  3.   

    参考：
    http://blog.csdn.net/dh20156/archive/2005/10/16/504814.aspx
      

  4.   

    <div style="position:relative;">
    <span style="margin-left:135px;width:18px;overflow:hidden;">
     <select name="radius_sel" style="width:153px;margin-left:-135px" onclick="javascript:if(this.parentNode.nextSibling.value != this.value) this.value = '' " onchange="this.parentNode.nextSibling.value=this.value ">
                 <option value="1">1</option>
                 <option value="2>2</option>
                 <option value="3">3</option>
                      
                </select></span><input name="aaa" id="aaa" style="width:135px;position:absolute;left:0px;" value="">
    </div>