第一版: 试图使用样式控制,在需要输入的时候把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" οnblur="this.value=this.value.toUpperCase();">
<span id="span_LIR">
<select id="addresses_LIR" style="margin-left:-102px;width:120px;" οnchange= "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>