一个可一输入的Select（select和text组合）博客分类： java Yahoo

程序员文章站 2024-02-09 21:16:46

...

<HTML>
<HEAD>
<TITLE>editable dropdown</TITLE>
</HEAD>
<BODY>
<table border="5" cellspacing="5" bordercolor="#00DF55" bgcolor="#A0A0A4">
<tr>
<td width="183"> </td><br>
<td width="248"> </td></tr>
<tr>
<td> </td><br>
<td><label id="labelObj"></label><select id="selectObj" style="position:absolute;top:10px; left:10px;"
onchange=textObj.value=this.options[this.selectedIndex].value >
                       <OPTION value="" selected>选择邮箱</OPTION> <OPTION
                value=sina.com>sina.com</OPTION> <OPTION
                value=sohu.comsohu.com123456478946>sohu.com1234564789</OPTION> <OPTION
                value=tom.com>tom.com</OPTION> <OPTION
                value=126.com>126.com</OPTION> <OPTION
                value=163.com>163.com</OPTION> <OPTION
                value=yahoo.com.cn>yahoo.com.cn</OPTION> <OPTION
                value=kingsoft.com>kingsoft.com</OPTION></SELECT>
                <input type="text" id="textObj" style=" top:10px; left:10px; background-color:#00FF00"">
</td>
</tr>
<tr>
<td> </td>
<td> </td></tr>
<tr>
<td> </td>
<td> </td></tr>
</table>

</BODY> <script language="javascript">
function test() {
var selectObj1 = document.getElementById("selectObj");
var textObj1 = document.getElementById("textObj");
var topObj = document.getElementById("labelObj");
var topSize = 0;
var leftSize = topObj.offsetLeft;
while (topObj.offsetParent != null) {
   topSize+=topObj.offsetParent.offsetTop;
   leftSize+=topObj.offsetParent.offsetLeft;
   topObj = topObj.offsetParent;
}
selectObj1.style.width = selectObj1.clientWidth;
textObj1.style.width = selectObj1.clientWidth-18;
try{
selectObj1.style.top = topSize+3;
selectObj1.style.left = leftSize+1;
leftSize += selectObj1.clientWidth;
selectObj1.style.clip="rect(0px, "+leftSize+", "+selectObj1.clientHeight+", "+textObj1.style.width+")";
} catch (e){alert(e);}
}
test();
</script>
</HTML>

一个可一输入的Select（select和text组合） 博客分类： java Yahoo