出自：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
1334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
