可输入下拉框

时间:2022-11-21 19:30:17


转自:http://blog.doyoe.com/article.asp?id=163


本来用z-index可以让input覆盖掉select很简单地做出一个可输入的下拉框,但是在IE6下测试,select无法被覆盖,select和iframe等这样的东东在ie6及以下浏览器中的层次是非常高的。然后在以上的地址中找到了方法,为了方便以后查找就把地址中的代码贴在这里

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>可选择可输入的下拉框</title>
<style>
.dys {
position:absolute;
z-index:5;
left:135px;
width:18px;
overflow:hidden;
}
.dys select {
margin-left:-128px;
width:146px;
}
.dyw {
position:absolute;
z-index:4;
}
.dyw input {
width:119px;
}
</style>
</head>
<body>
<form method="post" action="#">
<p class="dys">
<select name="oks" id="oks" onchange="document.getElementById('okw').value=this.value;">
<option value="可输入的下拉框">可输入的下拉框</option>
<option value="输入文字试试">输入文字试试</option>
<option value="下拉选择试试">下拉选择试试</option>
</select>
</p>
<p class="dyw"><input type="text" name="okw" id="okw" value="可输入的下拉框" /></p>
</form>
</body>
</html>