简易版可以编辑的drop
用input把select给盖住了， 缺点是长度不能自适应， 已经写死了
<html>
<style>
.back
{
width: 330px;
position: relative;
margin-top: 0px;
z-index: 0;
}
.val_input
{
width: 330px;
}
.val_select
{
position: absolute;
clip: expression("rect(auto auto auto " + (this.offsetWidth - 20) + "px)");
overflow: hidden;
width: 350px;
}
</style>
<body>
<form id='Form1'>
<br />
<br />
<br />
<br />
<table id="table_fields1" style="border: 1px solid">
<thead>
<tr>
<th>
name
</th>
<th>
<div style="width: 355px">
</div>
value
</th>
</tr>
</thead>
<tr>
<td>
this is field name
</td>
<td>
<select id='s1' class="val_select">
<option>aaaaaaaaa</option>
<option>bbbbbbbbb</option>
<option>ccccccccc</option>
</select>
<div class="back">
<input id='txtInput1' class="val_input" type='text' value='default1' />
</div>
</td>
</tr>
<tr>
<td>
this is field name2
</td>
<td>
<select id='Select1' class="val_select">
<option>kkkkkkkk</option>
<option>jjjjjjj</option>
<option>ppppppp</option>
</select>
<div class="back">
<input id='Text1' class="val_input" type='text' value='default2' />
</div>
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
var objs = document.getElementById('table_fields1').getElementsByTagName('select');
for (var idx = 0; idx < objs.length; idx++) {
var s = objs[idx];
s.onchange = function () {
var text = this.options[this.selectedIndex].text;
var test = this.parentElement.getElementsByTagName('input')[0];
test.value = text;
test.text = text;
}
}
</script>
</html>
<style>
.back
{
width: 330px;
position: relative;
margin-top: 0px;
z-index: 0;
}
.val_input
{
width: 330px;
}
.val_select
{
position: absolute;
clip: expression("rect(auto auto auto " + (this.offsetWidth - 20) + "px)");
overflow: hidden;
width: 350px;
}
</style>
<body>
<form id='Form1'>
<br />
<br />
<br />
<br />
<table id="table_fields1" style="border: 1px solid">
<thead>
<tr>
<th>
name
</th>
<th>
<div style="width: 355px">
</div>
value
</th>
</tr>
</thead>
<tr>
<td>
this is field name
</td>
<td>
<select id='s1' class="val_select">
<option>aaaaaaaaa</option>
<option>bbbbbbbbb</option>
<option>ccccccccc</option>
</select>
<div class="back">
<input id='txtInput1' class="val_input" type='text' value='default1' />
</div>
</td>
</tr>
<tr>
<td>
this is field name2
</td>
<td>
<select id='Select1' class="val_select">
<option>kkkkkkkk</option>
<option>jjjjjjj</option>
<option>ppppppp</option>
</select>
<div class="back">
<input id='Text1' class="val_input" type='text' value='default2' />
</div>
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
var objs = document.getElementById('table_fields1').getElementsByTagName('select');
for (var idx = 0; idx < objs.length; idx++) {
var s = objs[idx];
s.onchange = function () {
var text = this.options[this.selectedIndex].text;
var test = this.parentElement.getElementsByTagName('input')[0];
test.value = text;
test.text = text;
}
}
</script>
</html>
