首页 > 网络编程 > JavaScript > 表单特效 > select下拉列表

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需刷新才能执行]

javascript 模拟select下拉列表特效

您可能感兴趣的文章: