在html中实现可输入的下拉列表,并且当输入的值在下拉列表中时,使下拉列表弹出并选中所输入的值。哪位大侠帮帮我啊!!!不胜感激!!!!

解决方案 »

  1.   

    HTML 本身并未提供那样的东西,楼主是想进行一项转基因工程,程序员应该有点环保意识。:)
      

  2.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Untitled Document</title>
    </head><body >
    <table>
    <tr>
    <td>
    <input type="text" name="text1" onchange="changeSelect(this);" size="14"><br>
    <select name="select1" style="width=110">
    <option value="1">111</option>
    <option value="2">222</option>
    <option value="3">333</option>
    </select>
    <input type="hidden" name="option1Value" value="111">
    <input type="hidden" name="option2Value" value="222">
    <input type="hidden" name="option3Value" value="333">
    </td>
    </tr>
    </table>
    </body>
    </html><script language="javascript">
    function changeSelect(obj){ var objValue=obj.value;

    if(document.all.option1Value.value==objValue){
    select1.value="1";
    }else if(document.all.option2Value.value==objValue){
    select1.value="2";
    }else if(document.all.option3Value.value==objValue){
    select1.value="3";
    }

    }</script>
      

  3.   

    <script>
    scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><iframe id=selframe frameborder=0 height=100%></iframe><div id="selecthtml" class="selectcontent">select&Aacute;&ETH;卤铆</div></div>'
    document.write(scHTML)
    vDiv=selectcontent
    vDivHtml=selecthtmlfunction editselect(name,size,defaulttext,width,height,readonly){
      var combo=this;
      this.options=new Array();
      this.name=name;
      this.divname=name+'_div';
      this.buttonname=name+'_button';
      this.tablename=name+'_table';
      this.htmltable=name+'_html'
      
      if (!height) this.height=0; else this.height=height
      if (width) this.width=width
      if (!size) size=8
      if (!defaulttext) defaulttext=""
      if (!readonly || readonly==0) {readonly="" }else {if (readonly==1) readonly="readonly style=cursor:default";this.readonly=1}
      
      esHTML='<div id='+this.divname+'>'
             +'<table id='+this.tablename+' cellpadding=0 cellspacing=0 class=select><tr><td bgcolor=#FFFFFF>'
             +'<input type=text class=selecttext size="'+size+'" name='+name+' value="'+defaulttext+'" '+readonly+'><td><button class=selectbutton id='+this.buttonname+'>6</td></tr></table>'
             +'</div>'
      document.write(esHTML)
      this.sbutton=eval("document.all."+this.buttonname)
      
      if (this.readonly==1) eval(this.name).onclick=function(){combo.show()}  
      
      this.sbutton.onclick=function(){combo.show()}
      this.show=function(){
        pDiv=eval(combo.divname)
        pTable=eval(combo.tablename)
        var vHTML='<table id=htmltable cellspacing="0" cellpadding="2" bgcolor="#ffffff" class="selecttable" width=100%>'
        for (i=0;i<combo.options.length;i++)
          {
           vHTML+='<tr onmouseover="mo(this)" onmouseout="mu(this)" onclick="document.all.'+combo.name+'.value=this.innerText;selectcontent.style.visibility=\'hidden\'"><td nowrap>'+combo.options[i]
          }
         vHTML+="</table>"
        vDivHtml.innerHTML=vHTML
        
        vtop=pDiv.offsetTop+pDiv.offsetHeight
        vleft=pDiv.offsetLeft+1
        
        
        vParent = pDiv.offsetParent;
         while (vParent.tagName.toUpperCase() != "BODY")
    {
    vleft += vParent.offsetLeft;
    vtop += vParent.offsetTop;
    vParent = vParent.offsetParent;
    }   var redge=document.body.clientWidth-vleft
       var bedge=document.body.clientHeight-vtop
     
       if (!combo.width) {vDiv.style.width=pTable.offsetWidth} else {vDiv.style.width=combo.width}
            if (combo.height==0)
          {
            vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
            vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
          }
          else
          {
             if (htmltable.offsetHeight>combo.height)
              {
                vDiv.style.pixelHeight=combo.height
                vDivHtml.style.pixelHeight=combo.height
                } 
               else 
               {
              
                  vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
                  vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
               }
       
           }
        
        vDivHtml.scrollTop=0
        
        if (redge<vDiv.offsetWidth)
          vDiv.style.left=vleft-1-(vDiv.offsetWidth-redge)
            else
          vDiv.style.left=vleft-1
             if (bedge<vDiv.offsetHeight)
        //vDiv.style.top=vtop-vDiv.offsetHeight-pDiv.offsetHeight
        vDiv.style.top=vtop-vDiv.offsetHeight+bedge
             else
          vDiv.style.top=vtop
          
        
        vDivHtml.style.width=parseInt(vDiv.style.width)
          vDiv.style.visibility="visible"
      }
      
      this.add=function(text){
         combo.options[combo.options.length]=text
      }
      
      this.about=function(){
      
     }
    }
    function mo(obj){
    obj.style.backgroundColor="#000099"
    obj.style.color="#ffffff"
    }function mu(obj){
    obj.style.backgroundColor=""
    obj.style.color="#000000"
    }document.onmousedown=function(){
    if (vDiv.style.visibility=="visible"){
    mx=event.x + document.body.scrollLeft
    my=event.y + document.body.scrollTop;x1=vDiv.offsetLeft
    y1=vDiv.offsetTopx2=vDiv.offsetLeft+vDiv.offsetWidth
    y2=vDiv.offsetTop+vDiv.offsetHeightif (mx<x1 || my<y1 || x2<mx || y2<my) 
       { 
         vDiv.style.visibility='hidden'
       }
    }
    }
    </script><td width="23%">
      
      <script>
    var sel1=new editselect("src","25","","");                   sel1.add("1111111111");

                       sel1.add("22222222222");

                       sel1.add("33333333333");

                       sel1.add("lixin--2324");
    </script>
      
                  </td>
      

  4.   

    给你一个最简单的实现:
    <html>
    <head><title>EditableListBox</title>
    </head>
    <body>
    <select name="select" id="select" size="1" style="position:absolute; left: 10px; top: 10px; width: 120px; height: 20px; clip: rect(0 120 21 100)" onchange="textfield.value=select.value;textfield.select()">
        <option value="aaaaaaaa">aaaaaaaa</option>
        <option value="bbbbbbbb">bbbbbbbb</option>
        <option value="cccccccc">cccccccc</option>
        <option value="dddddddd">dddddddd</option>
        <option value="eeeeeeee">eeeeeeee</option>
        <option value="ffffffff">ffffffff</option>
    </select><input type="text" style="position:absolute; left: 10px; top: 10px; width: 102px; height: 21px" name="textfield">
    </body>
    </html>
      

  5.   

    syp1979(我是一阵风) 给的答案具有部分可行性,在此表示感谢!
    crazy_he(天煞孤星) 给的答案好长啊,我想应该是个不错的答案,可是测试了一下,感觉不太好使,能否给一个完备的答案?
    在此谢谢各位的答案,由于还没有等到很好的答案,准备再过些天结贴,到时一定会给帮助我的人给分的!!!!
      

  6.   

    以前用过,下面的代码完全用html。看看吧<table align="center" align="top" border="0" width="74%" height="892" cellspacing="5" cellpadding="0">
        <tr>
          <td width="100%" colspan="2" height="16"></td>
        </tr>    <tr>
          <td width="15%" height="23" align="left"><font size="2"></font></td>
          <td width="85%" height="23">
          
    <DIV style="CLIP: rect(3px 290px 21px 110px); HEIGHT: 21; LEFT: 250; POSITION: absolute; TOP: 80; WIDTH: 127; Z-INDEX: 1">

    <SELECT name=myselect onchange=test.value=this.value style="WIDTH: 127px">
     <OPTION  selected></OPTION>
       <OPTION value=zho>zho</OPTION>
       <OPTION  value=zhol>zhol</OPTION> 
       <OPTION value=zholl>zholl</OPTION>
        <OPTION value=zholll>zholll</OPTION>
        </SELECT>
    </DIV>
      
      
    <DIV style="HEIGHT: 21; LEFT: 250; POSITION: absolute; TOP: 80; WIDTH: 20; Z-INDEX: 2">
      
      <INPUT name=test style="HEIGHT: 21; WIDTH:"20" size="16"> 
      
    </DIV>
      
    </td>
    </tr>
      </table>
      

  7.   

    http://struts.application-servers.com/features/index.htmlLists:
    Internationalized headers 
    Sort on the server or on the client 
    Pager 
    Row color alternance 
    Links 
    Editable columns 
    Rows selection 
    Pluggable data formatter 
    Emphasizing of specific rows 
    Nested lists 
    Customization of the generated HTML code