javascript 模拟select下拉列表特效

更新时间：2009年02月11日 09:53:32 作者：

模拟select下拉列表特效，因为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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>javascript 模拟select下拉列表特效 by jb51.net</title> <style type="text/css">  </style> </head> <script type="text/javascript"> function gets_id(objName){ if(document.getElementById){ return eval('document.getElementById("' + objName + '")'); }else if(document.layers){ return eval("document.layers['" + objName +"']"); }else{ return eval('document.all.' + objName); } } //打开DIV层 function disp_cc() { if(gets_id('hh').style.display=='none') { gets_id('hh').style.display=''; } else { gets_id('hh').style.display='none'; } } //赋值 function gets_value(str) { gets_id('class').value=str; gets_id('hh').style.display='none'; } </script> <body> <div class=xmkc> <div><input name="class" type="text" class="wena" onClick="disp_cc();" value="请选择栏目"/> </div> <div id="hh" style="display:none" class=classlist> <ul>  <li class=lis><a href="#" onClick="gets_value('option标签1')">option值1</a></li> <li class=lis><a href="#" onClick="gets_value('option标签2')">option值2</a></li> <li class=lis><a href="#" onClick="gets_value('option标签3')">option值3</a></li> <li class=lis><a href="#" onClick="gets_value('option标签4')">option值4</a></li> </ul> <span onclick="hh.style.display='none'" class=close><a href="#">关闭</a></span> </div> </div> </body> </html>

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

您可能感兴趣的文章:

表单的一些基本用法与技巧
表单的一些基本用法与技巧...
2006-07-07
3种不同方式的焦点图轮播特效分享
焦点图轮播的效果我们总会看见过，本文整理了3中看似还不错的焦点图轮播效果，有需要的朋友可以参考下
2013-10-10
利用JavaScript更改input中radio和checkbox样式
利用JavaScript更改input中radio和checkbox样式的实现代码。
2009-11-11
javascript 自动填写表单的实现方法
在访问某些站点时，常常发现要填写一些没有实际意义但又必须得重复填写的表单，而且现在B/S的应用越来越多，下面的方法也许可以让你轻松点。
2010-04-04
可实现多表单提交的javascript函数
可实现多表单提交的javascript函数...
2007-08-08
select组合框option的捕捉实例代码
这是一份报名表单，要求用户在选中“专业人士访问员”和“定性访问员”后，分别显示“可提供被访者类型”和“容易接触到的行业”的对应表单。当呈未选中状态时，这2个框也对应的隐藏起来。
2008-09-09
javascript 表单的友好用户体现
javascript 表单的友好用户体现代码
2009-01-01
输入数量和价格自动计算输出金额的js代码
通过输入数量和价格自动计算输出金额的代码，主要用于购物网站，需要的朋友可以参考下
2013-03-03
javascript Zifa FormValid 0.1表单验证代码打包下载
javascript Zifa FormValid 0.1表单验证代码打包下载...
2007-06-06
鼠标经过的文本框textbox变色
文本框 textbox 变色
2009-05-05