可以输入的下拉框

来源：互联网发布：linux端口号怎么查看编辑：程序博客网时间：2024/05/03 01:27

一个既可以选择又可以输入的下拉框select，应该说已经有不少的人都写过了，虽然简单，但方法也不尽相同，适用性也有强有弱。

　　之所以要写这么一个东东，当然是因为有这个需求才写的。在网上找了半天虽然也找到一些不错的demo，但有的要么太复杂了，有的要么不够完美，和我想要的总有那么一点出入，所以只好自己写一个了。

　　由于是要让select变得可以输入，很简单的就会让我们想到在其上覆盖一个input输入框。让其只遮住select的左半部分，右边的选择按钮仍留在外，这样就会变得可以输入了。按照这个想法，一个demo很快就出来的，一路测试，几乎适用于我机器上的所有浏览器，但最后却栽在了ie6及以下浏览器的手里 - -!

　　事情总是不那么喜欢顺着你的思维去发展，我们大家或许都知道select和iframe等这样的东东在ie6及以下浏览器中的层次是非常高的。它们不允许有其它的东西来抢它们的风光，于是所有想遮住它们“绝世容颜”的“刺客”最后都会被它们镇压在身下。可怜的input也难逃此劫。

　　既然这种方法的适用性还不够完美，那么就换一个思路。反正只要将select左边的那个框框变成可输入就行。既然遮也遮不住，那剪掉总该行了吧。

　　有了思路，做起事情来就非常顺手，很快又以个demo也出来了，这回ie6及以下浏览器也老实了，乖乖束手。

　　【演示地址：http://www.doyoe.com/model/xhtmlcss/style/DYsw.htm】

XHTML 部分：

<!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>
<meta name="Author" content="Doyoe(飘零雾雨), " />
</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>　

CSS部分：

form,p {
margin:0;
padding:0;
}
form {
position:relative;
}
.dys {
position:absolute;
z-index:5;
left:111px;
width:18px;
overflow:hidden;
}
.dys select {
margin-left:-111px;
width:129px;
}
.dyw {
position:absolute;
z-index:4;
#top:-1px;
}
.dyw input {
width:113px;
voice-family:"\"}\"";
voice-family:inherit;
width:110px;
#width:107px;
}

　　当然，这里还可以使用clip来裁剪select，不过我没有去做这个Demo，有兴趣的朋友可以直接的试试，思路基本类似。