Jquery简单实现可编辑下拉框功能

 第一版： 试图使用样式控制，在需要输入的时候把input输入框重叠在select控件之上。

IE下没有问题，结果ff下就杯具了，在firefox下selelct总是被放置最顶层。

<script>
$(document).ready(function(){
    $("select").click(function(){
        var thisId = $(this).attr('id');
        var inputId = thisId.replace('addresses','input');
        var spanId = thisId.replace('addresses','span');
        $("#"+inputId).css({width:"100px",height:"20px",visibility:"visible"});
        $("#"+spanId).css({position:"absolute",margin:"1px 1px 1px -6px"});
    });
</script>
 <input style="width:100px;height:20px;visibility:hidden;" id="input_LIR" onblur="this.value=this.value.toUpperCase();"> 
 <span id="span_LIR"> 
	<select id="addresses_LIR" style="margin-left:-102px;width:120px;" onchange= "document.all.input_LIR.value=this.value;">
		<option value="SZXTZCZ" selected>SZXTZCZ</option>
	</select>
</span>

 

第二版：通过事件或者按钮触发完成输入框和下拉框的切换

<style>
.div{width:180px; height:25px; float:left; clear:both; overflow:hidden;}
.input{width:100px;height:25px;display:none;}
.select{width:100px;height:25px;}
.editbtn{width:50px; height:25px;margin-bottom:0px;}</style>
<script>

var _edit = "Edit";
var _ok = "Ok";

$(document).ready(function(){
    //绑定页面按钮点击事件
    $("input[id^='btn_']").bind('click',function(){
       var thisval = $(this).val();
       var thisid = $(this).attr('id');
       var selectId = thisid.replace('btn','addresses');
       var inputId = thisid.replace('btn','input');
       
       if(thisval == _edit){
          $("#"+selectId).hide();
          $("#"+inputId).show();
          
           var selval = $("#"+selectId+" option:selected").val();
           selval = selval  ?selval : "";
           $("#"+inputId).val(selval);
          
           $(this).val(_ok);
       }else{
          $("#"+selectId).show();
          $("#"+inputId).hide();
          $(this).val(_edit);
          
          $("#"+selectId+" option:selected").remove();
          var inputval = $("#"+inputId).val();
          $("#"+selectId).append("<option value='"+ inputval +"' selected>"+ inputval +"</option>"); 
       }
       
    });
    
    //绑定所有输入框失去焦点事件
    $("input[id^='input_']").bind('blur',function(){
        var thisval = $(this).val();
        var thisid = $(this).attr('id');
		var selectId = thisid.replace('input','addresses');
        var selval = $("#"+selectId+" option:selected").val();
		if (selval == thisval || !new RegExp('^[a-zA-Z0-9]{7}$', '').test(thisval)) {
		    $("#"+selectId).show();
            $(this).hide();
            
            var btnId = thisid.replace('input','btn');
            $("#"+btnId).val(_edit);
		}else{
		    $(this).val(thisval.toUpperCase());
		}
    });   
});
</script>

<table width="100%" border="0" cellpadding="3" cellspacing="1">
<tr class="tr1">
	<td>Num </td>
	<td>Message ID</td>

	<td>Address</td>
	<td>Send</td>
	<td>Station Code</td>
</tr>
<tr>
	<td>1</td>
	<td>LDM</td>

	<td>
	    <div class="div">
	      <input class="input" id="input_LDM"> 
		  <select id="addresses_LDM" class="select">
		        <option value="CANUFCZ" selected>CANUFCZ</option>
		        <option value="NNGTZ8X">NNGTZ8X</option>
		        <option value="NNGTF8X">NNGTF8X</option>
		        <option value="BJSTDCA">BJSTDCA</option>
		  </select>
		  <input type="button" id="btn_LDM" class="button" value="Edit" class="editbtn"/>
		</div>
	</td>

	<td><input type="checkbox" name="selectMessageId" value="LDM"  /></td>
	<td><input type="text" disabled /></td>
</tr>
<tr>
	<td>2</td>
	<td>CPM</td>
	<td>
	    <div class="div">
	      <input class="input" id="input_CPM"> 
		  <select id="addresses_CPM" class="select">

		        <option value="NNGTZ8X" selected>NNGTZ8X</option>
		        <option value="NNGTF8X">NNGTF8X</option>
		        <option value="NNGTZCZ">NNGTZCZ</option>
		        <option value="NNGTZCA">NNGTZCA</option>
		  </select>
		  <input type="button" id="btn_CPM" class="button" value="Edit" class="editbtn"/>
		</div>

	</td>
	<td><input type="checkbox" name="selectMessageId" value="CPM"  /></td>
	<td><input type="text" disabled /></td>
</tr>
</table>