真正实现可以编辑选择的下拉框--jquery 实现

主要是通过CSS样式表中clip来实现的。兼容IE6-8,谷歌，火狐等。

 效果图：

代码如下：

 

   1  

  2   
  3  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
  4  < html  xmlns ="http://www.w3.org/1999/xhtml" >
  5  < head >
  6       < title > 可以编辑的下来框实现方法--woody.wu </ title >
  7       < style  type ="text/css" >
  8          .cssINPUT
  9           {
 10              height :  19PX ;
 11              padding :  3PX ;
 12              padding-left :  3px ;
 13              padding-right :  0px ;
 14              margin :  0PX ;
 15              border :  1PX SOLID #C0C0C0 ;
 16              font-family :  宋体,arial ;
 17              font-size :  9pt ;
 18           }
 19          .select_div_list
 20           {
 21              position :  absolute ;
 22              border :  1px solid black ;
 23              background-color :  White ;
 24              overflow :  hidden ;
 25              overflow-y :  auto ;
 26           }
 27          .select_div_list_ul
 28           {
 29              margin :  0px ;
 30              padding :  0px ;
 31              list-style-type :  none ;
 32           }
 33          .select_div_list_ul li
 34           {
 35              cursor :  pointer ;
 36              padding-left :  3px ;
 37              font-family :  宋体,arial ;
 38              font-size :  9pt ;  *padding : 0px ; *height : 20px ; _height : 14px ; _margin : 0px ; _height : 14px ; *margin : 0px ; line-height : 14px ; }
 39          .selectSPAN
 40           {
 41              background-color :  Yellow ;
 42           }
 43       </ style >
 44   
 45       < script  type ="text/javascript"  src ="Js/jquery-1.4.2.min.js" ></ script >
 46   
 47       < script  type ="text/javascript" >
 48           var  inputID  =   " input1 " ;
 49           var  selectID  =   " select1 " ;
 50           var  widt  =   0 ;
 51           var  inputWi  =   0 ;
 52           var  he  =   0 ;
 53          $( function () {
 54              inputID  =   " input1 " ;
 55              selectID  =   " select1 " ;
 56              widt  =   200 ;
 57              inputWi  =  widt  -   20 ;
 58              he  =  $( " #user " ).height()  -   41 ;
 59               var  offset  =  $( " input[id=input1] " ).offset();
 60              $( " # "   +  selectID).change( function () {
 61                   var  newvar  =  $( " # "   +  selectID).find( " option:selected " ).text();
 62                  $( " # "   +  inputID).val(newvar);
 63              }).click( function () {
 64                  $( " #select_div_on_key "   +  selectID).remove();
 65              }).css({  " display " :  " block " ,  " width " : widt  +   " px " ,  " z-index " :  1 ,  " clip " :  " rect(0px  "   +  widt  +   " px 51px 151px) "  });
 66   
 67              $( " # "   +  inputID).keyup( function () {
 68                  ShowSelectCombo();
 69              }).click( function () {
 70                  ShowSelectCombo();
 71              }).css({  " z-index " :  2 ,  " width " : inputWi  +   " px "  }); ;
 72          });
 73           function  ShowSelectCombo() {
 74               var  pob  =  $( " # "   +  inputID);
 75               var  v  =  pob.val();
 76               var  off  =  pob.offset();
 77               var  wi  =  pob.width()  +   16 ;
 78               var  tp  =  off.top  +  pob.height()  -   100   +   7 ;
 79               var  lef  =  off.left  -   200   +   2 ;
 80               var  html  =   " <div class='select_div_list' id='select_div_on_key "   +  selectID  +   " ' style='width: "   +  wi  +   " px;top: "   +  tp  +   " px;left: "   +  lef  +   " px;'><ul class='select_div_list_ul'> " ;
 81              $( " # "   +  selectID).find( " option " ).each( function () {
 82                   var  tk  =  $( this );
 83                  html  +=   " <li val=' "   +  tk.val()  +   " ' ht=' "   +  encodeURIComponent(tk.html())  +   " '> "   +  tk.html().replace(v,  " <span class='selectSPAN'> "   +  v  +   " </span> " )  +   " </li> " ;
 84              });
 85              html  +=   " </ul></div> " ;
 86               var  ulDIV  =  $( " #select_div_on_key "   +  selectID);
 87              ulDIV.remove();
 88              $( " #user " ).append(html);
 89               var  ulDIV  =  $( " #select_div_on_key "   +  selectID);
 90               var  hei  =  ulDIV.find( " ul " ).height();
 91               var  newHeight  =  hei  >  he  ?  he : hei;
 92        
 93              ulDIV.css({ height: newHeight  +   " px "  });
 94              ulDIV.find( " li " ).hover( function () {
 95                  $( this ).css({  " background-color " :  " #316ac5 "  });
 96              },  function () {
 97                  $( this ).css({  " background-color " :  " white "  });
 98              });
 99              ulDIV.find( " li " ).click( function () {
100                   var  ki  =  $( this );
101                   var  va  =  ki.attr( " val " );
102                   var  htm  =  ki.attr( " ht " );
103                  htm  =  decodeURIComponent(htm);
104                  $( " # "   +  inputID).val(htm);
105                  $( " # "   +  selectID).val(va);
106                  ulDIV.remove();
107              });
108          }
109   
110       </ script >
111   
112  </ head >
113  < body >
114       < form  name ="form1"  method ="post"  action ="qqq.aspx"  id ="form1" >
115  < div >
116  < input  type ="hidden"  name ="__VIEWSTATE"  id ="__VIEWSTATE"  value ="/wEPDwULLTIxMjQ5OTYwOTdkZH49VftoWVz/vaIL4f2byf4/w86b"   />
117  </ div >
118   
119  < div >
120   
121       < input  type ="hidden"  name ="__EVENTVALIDATION"  id ="__EVENTVALIDATION"  value ="/wEWDwL15JrvCgL2jaW0BgL3jaW0BgL0jaW0BgL1jaW0BgLyjaW0BgLzjaW0BgLwjaW0BgLujaW0BgL3jeW3BgKm4u6hCAL3je23BgL3jdG3BgL3jdW3BgL3jdm3BnqAGtu2PbiTi9dWHvWrW6QCqrYo"   />
122  </ div >
123       < div  style ='position:  absolute; top: 100px; width: 500px; left: 200px; padding: 10px;
124          height: 400px; border: 1px solid red;' id ='user' >
125           < div >
126               < div  style ='overflow:  hidden; margin-top: 10px; height: 30px;' >
127                   < input  id ="input1"  name ="input1"  type ="text"  class ='cssINPUT'  style ='_height:  20px;
128                      *height: 13px; display: block; float: left; position: absolute; border-right: 0px;'  />
129                   < select  name ="select1"  id ="select1"  class ="cssINPUT"  style ="float: left;
130                      display: none; height: 27PX; position: absolute; cursor: pointer; margin-left: 2px;
131                      padding: 0px;" >
132       < option  value ="1" > 車身和底盤修整設備 </ option >
133       < option  value ="2" > 真空吸盤 </ option >
134       < option  value ="3" > 氧/乙炔焊割工具 </ option >
135       < option  value ="4" > 冷鉚机  </ option >
136       < option  value ="5" > 大市場撒旦 </ option >
137       < option  value ="6" > 大擦 </ option >
138       < option  value ="7" > 第三十 </ option >
139       < option  value ="9" > 大市場 </ option >
140       < option  value ="20" > 車身外形修复机（介子机） </ option >
141       < option  value ="1022" > 沙皮狗 </ option >
142       < option  value ="22" > 整形机 </ option >
143       < option  value ="23" > 舉升机 </ option >
144       < option  value ="24" > 修車躺板 </ option >
145       < option  value ="25" > 空調制冷劑充注机  </ option >
146   
147  </ select >
148                  
149               </ div >
150           </ div >
151       </ form >
152  </ body >
153  </ html >
154