css+js实现select列表横向排列效果代码

更新时间：2008年06月18日 21:08:24 作者：

真不错的select横排效果代码，推荐大家阅读，这个思路真不错，太感谢作者了

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>请选择ABCDEFGHI_select横排效果_脚本之家</title> </head> <body> <style> *{font-size:12px;} A.s_l {     BORDER: #dddddd 1px solid;BORDER-right: #dddddd 0px solid; BACKGROUND: #ffffff;PADDING: 4px 6px 2px 6px; TEXT-DECORATION: none;line-height:12px } A.s_l:hover {     BORDER: #003366 1px solid;BORDER-right: #dddddd 0px solid; BACKGROUND: #0063dc;COLOR: #ffffff; TEXT-DECORATION: none;line-height:12px } A.s_r {     BORDER: #dddddd 1px solid;BACKGROUND: #ffffff; PADDING: 4px 6px 2px 6px; TEXT-DECORATION: none;line-height:12px } A.s_r:hover {     BORDER: #003366 1px solid;BACKGROUND: #0063dc;COLOR: #ffffff; TEXT-DECORATION: none;line-height:12px } input    {BORDER: #aaa 1px solid;width:65px;height:23px;PADDING: 4px 6px 0px 6px;background:url(http://bbs.blueidea.com/attachment.php?aid=90338&noupdate=yes) no-repeat 95% center;} .span1    {position:relative;top:3px;} .span2    {position:relative;left:-3px;top:1px} </style> <span class="span1"><input type="text" value="请选择" onclick="sele(this)"></span> <span class="span2" id="select" style="display:none"><A class=s_l  href="###">A</A><A class=s_l  href="###">B</A><A class=s_l  href="###">C</A><A class=s_l  href="###">D</A><A class=s_l  href="###">E</A><A class=s_l  href="###">F</A><A class=s_l  href="###">G</A><A class=s_l  href="###">H</A><A class=s_r  href="###">I</A></span> <script> function sele(o){     var oobj=document.getElementById("select")     if (oobj.style.display=="none"){         oobj.style.display=""         var obj=oobj.getElementsByTagName("a"),j=obj.length         for (var i=0;i<j;i++){             obj[i].onclick=function(){                 o.value=this.innerHTML;                 oobj.style.display="none"             }         }     }     else oobj.style.display="none" } </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

对textarea框的代码调试，而且功能上使用非常方便，酷
对textarea框的代码调试，而且功能上使用非常方便，酷...
2006-06-06
用JavaScript实现的一个IP地址输入框
用JavaScript实现的一个IP地址输入框...
2007-10-10
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）
2008-09-09
用于判断用户注册时，密码强度的JS代码
原理及是根据输入字符的类别，是字母，还是数字，大小写等判断，代码比较精简，大家可以研究下。
2009-01-01
Javascript select控件操作大全（新增、修改、删除、选中、清空、判断存在等）
这个是比较齐全的select操作代码了，大家可以根据需要调用了
2008-12-12
javascript textarea支持图形编辑
本来以为只有iframe支持编辑了，今天突然发现textarea也支持编辑：（是不是我太愚钝了？ textarea不能用innerHTML来插入html，而用appendChild
2008-09-09
JS+CSS模拟IP输入框
JS+CSS模拟IP输入框...
2006-09-09
常用js脚本
常用js脚本...
2006-12-12
IE不支持option的display样式，只能使用remove和add
想实现一个很简单的功能：当选中“中介”时，不显示“求购”与“求租”。本以为通过display:none即可实现，结果发现在option元素上使用display:none在firefox中有效，在IE6、IE7、IE8中都无效。
2009-12-12
validator验证控件使用代码
由于代码比较简单注释也比较少，主要用于验证简单的规则（有内置的也可以自己添加正则表达式，暂不支持复杂的方法），并处理了表单提交时候验证，主要思路也是沿用以前基于jQuery的一个validator插件。
2010-11-11