出自:http://blog.csdn.net/hui_0924/archive/2008/11/15/3302554.aspx
请两天同事问到,怎样样下拉菜单可编辑,我马上想到asp.net的服务器空间combox,记得这个控件是有个属性可以设置是否可编辑。于是我就在html的<select>中找这个属性,结果是无功而返。那么,我就认为<select>是不可编辑的,但是还是到网上google一下,还真能实现下拉菜单可编辑,于是赶紧点开,看个究竟。
原来,并不是<select>可以编辑,而是用一个文本框作为输入的控件,而当下拉菜单的onchange事件发生时,将选中的值赋给这个文本框,以css的clip属性将下拉菜单裁剪成只有一个下拉的箭头,并且与文本框紧挨着,这样在html中看起来就好像是下拉菜单可以编辑了。
能做出这样的效果,还真的让我觉得css + javascript很强大(呵呵,菜鸟是很容易惊叹的)。这个效果在火狐和IE中浏览,因为一些css上的差异,看起来会有些不同,这里以代码以实现IE的效果为准,具体的代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>可编辑下拉列表</title>
</head>
<body>
<div>
<span>这是一个可编辑下拉列表:</span>
<input type="text" id="txtInput" style="width:150px; height:15px;" />
<select style="position:absolute; left:208px; width:176px; height:22px; clip:rect(2px auto 20px 157px);" οnchange="document.getElementById('txtInput').value=this.value;"><option value="0">0</option><option value="1">1</option><option value="2">2</option></select>
<input type="button" value="确定" style="position:absolute; left:385px;" οnclick="alert('您输入的内容是:' + document.getElementById('txtInput').value);" />
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>可编辑下拉列表</title>
</head>
<body>
<div>
<span>这是一个可编辑下拉列表:</span>
<input type="text" id="txtInput" style="width:150px; height:15px;" />
<select style="position:absolute; left:208px; width:176px; height:22px; clip:rect(2px auto 20px 157px);" οnchange="document.getElementById('txtInput').value=this.value;"><option value="0">0</option><option value="1">1</option><option value="2">2</option></select>
<input type="button" value="确定" style="position:absolute; left:385px;" οnclick="alert('您输入的内容是:' + document.getElementById('txtInput').value);" />
</div>
</body>
</html>
你可以修改代码后在运行 < type="text/javascript"> function runCode() { var winOpen = open("","sample"); var code = document.getElementById("txtCode").value; winOpen.document.write(code); }
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/hui_0924/archive/2008/11/15/3302554.aspx