大概一年前我参考csdn一个同学写的文章写了这个东西,当时在firefox下有显示的bug.现在做了一点修改。
bug没有了。
<HTML>
<HEAD>
<style>
.ptext{
position:absolute;
height:22px !important;
height:22px;
BACKGROUND:#FFF;
BORDER:1px solid #7F9DB9;
width: 150px;
}
.pselect{
position:absolute;
height:20px;
}
</style>
<SCRIPT LANGUAGE="javascript">
function Body_Init(oSelectid,oTextid)
{
oSelect = document.getElementById(oSelectid);
oText = document.getElementById(oTextid);
var iLeft= oSelect.offsetLeft;
var iTop = oSelect.offsetTop;
var iWidth=oSelect.offsetWidth;
var iHeight=oSelect.offsetHeight;
oSelect.style.clip='rect(0,'+iWidth+','+(iHeight)+','+(iWidth-18)+')';
oText.style.top =iTop;
oText.style.left=iLeft;
oText.style.width=iWidth-17;
}
function Combo_Select(oSelectid,oTextid)
{
oSelect = document.getElementById(oSelectid);
oText = document.getElementById(oTextid);
oText.value = oSelect.options[oSelect.selectedIndex].text ;
oText.focus();
//alert(oText.value);
}
</SCRIPT>
</HEAD>
<BODY>
<table width=50% align="center" valign="middle" border=1>
<tr><td><input type="text" name="dd" value="" size="40" /></td></tr>
<tr>
<td height=30 valign=top>
<INPUT class="ptext" TYPE="TEXT" NAME="pText" id="pText">
<SELECT size="1" class="pselect" ONCHANGE="Combo_Select(this.id,'pText')" NAME="pCombo" id="pCombo">
<option value=""></option>
<option value="d">test1t1t1t1t1t1</option>
<option value="dd">test2fd</option>
</SELECT>
</td>
</tr>
<tr><td><input type="text" name="dd" value="" size="40" /></td></tr>
</table>
<script language="javascript" type="text/javascript">
<!--
Body_Init('pCombo','pText');
/*pTextObj = document.getElementById('pText');
pComboObj = document.getElementById('pCombo');
al ="";
al += "pTextObj.style.top="+pTextObj.style.top+"\n";
al += "pTextObj.style.left="+pTextObj.style.left+"\n";
al += "pTextObj.style.width="+pTextObj.style.width+"\n";
al += "pTextObj.style.height="+pTextObj.style.height+"\n";
al += "pComboObj.offsetTop="+pComboObj.offsetTop+"\n";
al += "pComboObj.offsetLeft="+pComboObj.offsetLeft+"\n";
al += "pComboObj.clientWidth="+pComboObj.clientWidth+"\n";
al += "pComboObj.clientHeight="+pComboObj.clientHeight+"\n";
al += "pComboObj.offsetwidth="+pComboObj.offsetWidth+"\n";
al += "pComboObj.offsetheight.height="+pComboObj.offsetHeight+"\n";
*/
//alert(al);
//-->
</script>
</BODY>
</HTML>