可编辑的select 框

今天用到这个知识，网上找了很多遍。目前有两种方法

1 下面的这个办法是一个还不错的，不同于国内解法的解法。
自己定义一个select吧，事件写成[onClick="beginEditing(this);" onBlur="finishEditing();"]。
然后把下面的javascript写在一个javascript文件里面，引到html文件中。

 var object= null;
 var isNN = (window.navigator.appName.indexOf("Netscape")!=-1);
 var selectedIndex = 0;
 var pointer = "|";
 var blinkDelay = null;
 var pos = 0;

 function beginEditing(menu) { //=======>> 检测浏览器版本<<==
  finishEditing();
  if(menu.selectedIndex > -1 && menu[menu.selectedIndex].value != "read-only") {
   object= new Object();
   object.editOption = menu[menu.selectedIndex];
   object.editOption.old = object.editOption.text;
   object.editOption.text += pointer;
   selectedIndex = menu.selectedIndex;
   if(window.navigator.userAgent.toLowerCase().indexOf("msie") != -1){ //user is using IE
    document.onkeydown = keyPressHandler;
   }else{
   document.onkeypress = keyPressHandler;
   pos = object.editOption.text.indexOf(pointer);
   blinkDelay = setTimeout("blinkPointer()", 300);
   }
  }
 } 
 
 function keyPressHandler(e){ //=======>> <<==
  stopBlinking();
  menu.selectedIndex = selectedIndex;
  var option = object.editOption; 
  var keyCode = (window.event) ? event.keyCode : e.keyCode;
  var specialKey = true;
  if(keyCode == 0){
   keyCode = (isNN) ? e.which : event.keyCode;
   specialKey = false;
  } 
  if(keyCode == 16){
   return false;
  }else if(keyCode == 116 && specialKey){
   finishEditing();
   window.location.reload(true);
  }else if(keyCode == 8){
   option.text = option.text.substring(0,option.text.indexOf(pointer)-1) + pointer + option.text.substring(option.text.indexOf(pointer)+1,option.text.length);
  }else if(keyCode == 46 && option.text.indexOf(pointer) < option.text.length){
   option.text = option.text.substring(0,option.text.indexOf(pointer)) + pointer + option.text.substring(option.text.indexOf(pointer)+2,option.text.length);
  }else if (keyCode == 13){
   finishEditing();
  }else if(keyCode == 37 && option.text.indexOf(pointer) > 0 && specialKey){
   option.text = option.text.substring(0,option.text.indexOf(pointer)-1) + pointer + option.text.substring(option.text.indexOf(pointer)-1,option.text.indexOf(pointer)) + option.text.substring(option.text.indexOf(pointer)+1,option.text.length);
  }else if(keyCode == 39 && option.text.indexOf(pointer) < option.text.length && specialKey){
   option.text = option.text.substring(0,option.text.indexOf(pointer)) + option.text.substring(option.text.indexOf(pointer)+1,option.text.indexOf(pointer)+2) + pointer + option.text.substring(option.text.indexOf(pointer)+2,option.text.length);
  }else if(((keyCode == 37 && option.text.indexOf(pointer) <= 0) || (keyCode == 39 && option.text.indexOf(pointer) >= option.text.length) || keyCode == 40 || keyCode == 38 || keyCode == 20 || keyCode == 33 || keyCode == 34) && specialKey){
   //dobjectnothing
  }else if(keyCode == 36 && specialKey){
   option.text = pointer + option.text.substring(0,option.text.indexOf(pointer)) + option.text.substring(option.text.indexOf(pointer)+1,option.text.length);
  }else if(keyCode == 35 && specialKey){
   option.text = option.text.substring(0,option.text.indexOf(pointer)) + option.text.substring(option.text.indexOf(pointer)+1,option.text.length) + pointer;
  }else{
   option.text = option.text.substring(0,option.text.indexOf(pointer)) + String.fromCharCode(keyCode) + pointer + option.text.substring(option.text.indexOf(pointer)+1,option.text.length);
   pos = option.text.indexOf(pointer);
   blinkDelay = setTimeout("blinkPointer()", 300);
  }
  
  if(!((keyCode >= 48 && keyCode <= 90) || (keyCode >= 96 && keyCode <= 122))){
   return false;
  }
  
 }
 
 function blinkPointer(){ //=======>> <<==
  if(object== null){
   return;
  }
  pos = object.editOption.text.indexOf(pointer);
  object.editOption.text = object.editOption.text = object.editOption.text.substring(0,object.editOption.text.indexOf(pointer)) + "." + object.editOption.text.substring(object.editOption.text.indexOf(pointer)+1,object.editOption.text.length);
  blinkDelay = setTimeout("blinkPointer2()", 300); 
 }
 
 function blinkPointer2(){
  object.editOption.text = object.editOption.text = object.editOption.text.substring(0,pos) + pointer + object.editOption.text.substring(pos+1,object.editOption.text.length);
  blinkDelay = setTimeout("blinkPointer()", 300);
 }
 
 function stopBlinking(){ 
  clearTimeout(blinkDelay);
  if(object.editOption.text.charAt(pos) != pointer){
  object.editOption.text = object.editOption.text = object.editOption.text.substring(0,pos) + pointer + object.editOption.text.substring(pos+1,object.editOption.text.length);
  }
 }
 
 function finishEditing() {  //=======>> <<==
  if(object!= null) {
   stopBlinking();
   option = object.editOption;
   option.text = option.text.substring(0,option.text.indexOf(pointer)) + option.text.substring(option.text.indexOf(pointer)+1,option.text.length);
   
   option.value = option.text; 
   document.onkeypress = null;
   document.onkeydown = null;
   object= null;
   var flag = false;
   for (var i=0; i<5; i++){//                                                                记得改回来
    if (document.all.test.options[i].text==""){
     flag = true;
    }
   } 
  }
  if(flag == false){
   var the_option= new Option("","");
   document.all.test.add(the_option);
  }
 }
 

2

        <div class="input-prepend input-append  input-group-sm span3 col-sm-3"  style="padding-left:10px;   margin-right: 80px; width: 24%">
         <span class="add-on" style="font-family: 微软雅黑;font-size: 12px" >线路带宽：</span>
        <span style="position:absolute; border:1px solid #c1c1c1; overflow:hidden; width:160px; height:28px; ">
         <select id="flineBandwidth" name="linepo.flineBandwidth"  class="form-control" style="width:160px; border:1px" onChange=" javascript:document.getElementById('ccdd').value=document.getElementById('flineBandwidth').options[document.getElementById('flineBandwidth').selectedIndex].value;">
             <option value="${linepo.flineBandwidth}" selected="selected">${linepo.flineBandwidth}</option>
             <option value="请选择" >----请选择----</option>
             <option value="2M" >2M</option>
             <option value="3M" >3M</option>
             <option value="4M" >4M</option>
             <option value="6M" >6M</option>
             <option value="10M" >10M</option>
             <option value="30M" >30M</option>
           </select>
         </span>
         <span style="position:absolute; border-top:1pt solid #c1c1c1; border-left:1pt solid #c1c1c1; border-bottom:1pt solid #c1c1c1; width:130px; height:23px;">
         <input type="text" name="ccdd" id="ccdd" value="可选择也可编辑" style="width:128px ;height:18px;border:0pt;">
         </span>        
        </div>