当前位置：Gxlcms > JavaScript > javascript 模拟select下拉列表特效

javascript 模拟select下拉列表特效

时间：2021-07-01 10:21:17 帮助过：39人阅读

<!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> 
 
<input name="class" type="text" class="wena" onClick="disp_cc();" value="请选择栏目"/> 
 
 
<ul> 
 
<li class=lis>option值1</li> 
<li class=lis>option值2</li> 
<li class=lis>option值3</li> 
<li class=lis>option值4</li> 
</ul> 
<span onclick="hh.style.display='none'" class=close>关闭</span> 
 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

javascript 模拟select下拉列表特效

人气教程排行