新手求教JS可编辑的下拉选择框

 <select name="headerName" id="headerName"> <option value="aaaaaaaa" selected>aaaaaaaa</option> <option value="bbbbbbbb">bbbbbbbb</option> <option value="ccccccccc">ccccccccc</option> <option value="dddddddd">dddddddd</option> </select> 请教下如何实现可编辑可下拉选择

解决方案 »

  1.   

    http://www.baidu.com/s?tn=sitehao123&bs=select+css&f=8&wd=%BF%C9%CA%E4%C8%EB%CF%C2%C0%AD%BF%F2
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title> </title>
    </head>
    <body>
        
    <div style="border:1px solid green;width:118px;height:20px; position:absolute;">
          <input type='text' id="rename" style="width:99px;height:20px;font-size:10pt;border:0px;position:absolute; z-index:1000; " />
          <div style="width:18px;border:0px;height:20px;position:absolute; left:100px;">
          <select   style="left:-100px;width:118px;background-color:#FFFFFF;position:absolute; " onchange="document.getElementById('rename').value=this.value;"> 
           <option value="dddd">dddd</option>
           <option value="aaa">aaa</option>
           <option value="bbb">bbb </option>
          </select> 
          </div> 
      </div>   </body>
    </html>
      

  3.   

    用层重叠输入框和下拉框，空出下拉按钮，设置select的onselectchange。
      

  4.   

    放入其它div 内部就可以了撒<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title> </title>
    </head>
    <body>
    <div id="Div1" style="height:200px; width:300px; overflow:auto;border:1px solid green;">
       <div style="height:400px; width:200px;"></div>
       </div>
     <div style="height:50px; width:300px; overflow:auto;border:1px solid blue; margin:10px; padding:10px;">
    <div style="border:1px solid green;width:118px;height:20px; position:absolute;">
          <input type='text' id="rename" style="width:99px;height:20px;font-size:10pt;border:0px;position:absolute; z-index:1000; " />
          <div style="width:18px;border:0px;height:20px;position:absolute; left:100px;">
          <select   style="left:-100px;width:118px;background-color:#FFFFFF;position:absolute; " onchange="document.getElementById('rename').value=this.value;"> 
           <option value="dddd">dddd</option>
           <option value="aaa">aaa</option>
           <option value="bbb">bbb </option>
          </select> 
          </div> 
      </div>
    </div>
       <div id="testDiv" style="height:200px; width:300px; overflow:auto;border:1px solid green;">
       <div style="height:400px; width:200px;"></div>
       </div></body>
    </html>