模拟select下拉列表特效

稿源：互联网 2022-06-13 10:13:26 点击： 4439 撤稿纠错

用JS仿select效果的示例代码，输入框内点击一下，立即弹出下拉列表。

以下讨论的是和下拉列表相关的模拟select下拉列表特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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=utf-8" /> <title>无标题文档</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> <a href="#">关闭</a> </div> </div> </body> </html> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于模拟select下拉列表特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200902074185.shtml方便下次再访问哦。

·上一篇： 一个全选,反选操作操作特效,分享一下！
·下一篇： 正则表达式进行表单限制输入

模拟select下拉列表特效

文章分类LIST >>返回首页

最新游戏

最新新闻