1、第一种方案：<html>
<head><title></title>
<style type="text/css">
div,span,p,td,font{font-size:9pt;}
</style>
</head>
<body>
<span style="absolute;margin-top:-12px;">
<table cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td align="left">
<span style="position:absolute;border:1pt solid #c1c1c1;overflow:hidden;188px;height:19px;clip:rect(-1px 190px 190px 170px);">
<select name="aabb" id="aabb" style="190px;height:20px;margin:-2px;" onChange="javascript:document.getElementById
('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;">
<option value="" style="color:#c2c2c2;">---请选择---</option>
<option value="闲人书库">闲人书库</option>
<option value="闲人BLOG">闲人BLOG</option>
<option value="<a href="http://www.ayinsky.com" target="_blank">闲人设计</a>"><a href="http://www.ayinsky.com" target="_blank">闲人设
计</a></option>
<option value="闲人软件">闲人软件</option>
</select>
</span>
<span style="position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt solid #c1c1c1;border-bottom:1pt solid
#c1c1c1;170px;height:19px;">
<input type="text" name="ccdd" id="ccdd" value="可选择也可输入的下拉框" style="170px;height:15px;border:0pt;">
</span>
</td></tr></table>
</span>
</body>
</html>
2、第二种方案：适合于FIREFOX
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>enable input dropdownlist </title>
<style type="text/css">
html,body,form,p {
margin:0;
padding:0;
}
#container {
position:relative;
}
#dropdown {
position:absolute;
z-index:5;
left:111px;
18px;
overflow:hidden;
top:0;
}
#dropdown select {
margin-left:-111px;
129px;
}
#content {
position:absolute;
z-index:4;
top:0;left:0;
}
#content input {
111px;
height:13px;
border-style:none;
}
</style>
</head>
<body>
<div>
testing.....<br/>
testing.....<br/>
testing.....<br/>
testing.....<br/>
</div>
<form name="main" target="_self">
<div id="container">
<p id="dropdown">
<select name="dropdown" onchange="document.getElementById('text').value=this.value;">
<option value="testing...">testing...</option>
<option value="testing...">testing...</option>
<option value="testing...">testing...</option>
</select>
</p>
<p id="content"><input type="text" id="text" value="testing..." /></p>
</div>
</form>
</body>
</html>
第三种方案：适合于IE
<html>
<head>
<title>可输入的select下拉框</title>
</head>
<body >
<div>
testing.....<br/>
testing.....<br/>
testing.....<br/>
testing.....<br/>
testing.....<br/>
</div>
<div style="position:relative; padding: 0px;margin: 0px;">
<input name="salesCode" id="salesCode" style="position:absolute;top:0; 120px; height:21px; left:0px; " onClick="this.value=''">
<span id="selectInput">
<select name="selectInput" style="position:absolute;top:0;120px;height:20px;left:0px; clip: rect(0 180 132 101)"
onchange="document.getElementById('salesCode').value=options[selectedIndex].text;">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
</span>
</div>
</body>
</html>