index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<h5>可编辑的下拉列表</h5>
<table cellspacing=0 cellpadding=0>
<tr>
<td align='right'>
<span>
<input type='text' id='searchTxt' style='width:120pt;'>
</span>
</td>
<td align='left'>
<span style='width:15pt;'>
<select id='phone' name='phone' style='width:135pt;margin-left:-122pt;overflow:hidden;' οnchange='searchTxt.value=this.value;'>
<option value='-1'>请选择</option>
<option value='motorola'>摩托罗拉</option>
</select>
</span>
</td>
</tr>
</table>
<iframe id='resultFrame' frameBorder='0' style='width:133pt;height:100pt;overflow:hidden;' scrolling='auto'></iframe>
<script>
var searchTxt = document.all.searchTxt;
searchTxt.onkeyup = function(){
document.all.resultFrame.src = 'content.html';
}
</script>
</BODY>
</HTML>
content.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
table {
font-size:13px;
width:120pt;
}
.trMouseOver {
background-color:#6666FF;
}
.trMouseOut {
background-color:#FFFFFF;
}
</style>
</HEAD>
<BODY>
<table>
<tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT200</td></tr>
<tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT201</td></tr>
<tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT202</td></tr>
<tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT203</td></tr>
<tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT204</td></tr>
<tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT205</td></tr>
<tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT206</td></tr>
<tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT207</td></tr>
<tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT208</td></tr>
<tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT209</td></tr>
<tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT210</td></tr>
<tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT211</td></tr>
</table>
<script>
trMouseOver = function(obj){
obj.className = 'trMouseOver';
}
trMouseOut = function(obj){
obj.className = 'trMouseOut';
}
trClick = function(obj) {
alert(obj.childNodes[0].innerText);
parent.document.all.searchTxt.value = obj.childNodes[0].innerText;
parent.document.all.resultFrame.style.display='none';
}
</script>
</BODY>
</HTML>