div模拟select自定义下拉列表框（jQuery）资源-CSDN文库

共8个文件

js：4个

png：2个

html：2个

自定义下拉框

div仿select

js下拉框

jQuery下拉框

div下拉框

5星 · 超过95%的资源需积分: 50 82 浏览量 2012-09-19 09:04:16 上传评论 1 收藏 67KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

div模拟下拉列表框(20129182227963).rar （8个子文件）

divselect 鼠标移动版

jquery.js 91KB

demo.html 3KB

arrows.png 180B

divselect.js 558B

divselect 鼠标点击版

jquery.js 91KB

demo.html 3KB

arrows.png 180B

divselect.js 884B

<!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>div模拟下拉菜单jquery插件 mouseover版</title> <style type="text/css"> body,ul,li{ margin:0; padding:0; font-size:13px;} ul,li{list-style:none;} #divselect{width:186px; margin:0 auto; position:relative; z-index:10000;} #divselect cite{width:150px; height:24px;line-height:24px; display:block; color:#807a62; cursor:pointer;font-style:normal; padding-left:4px; padding-right:30px; border:1px solid #333333; background:url(arrows.png) no-repeat right center;} #divselect ul{width:184px;border:1px solid #333333; background-color:#ffffff; position:absolute; z-index:20000; margin-top:-1px; display:none;} #divselect ul li{height:24px; line-height:24px;} #divselect ul li a{display:block; height:24px; color:#333333; text-decoration:none; padding-left:10px; padding-right:10px;} #divselect ul li a:hover{background-color:#CCC;} </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="divselect.js"></script> <script type="text/javascript"> $(function(){ //初始化自定义下拉列表框 $.divselect("#divselect","#selectedvalue"); //显示下拉列表框选中项的值 $("#btnShowSelectedValue").click(function(){ var selvalue=$("#selectedvalue").val(); alert("选中项的值为：" + selvalue); }); }); </script> </head> <body> <form action="" method="post"> <div style="text-align:center;margin:50px 0px 50px 0px;font-size:18px;"> <b>div模拟select自定义下拉列表框鼠标移动(onmouseover)版</b> </div> <div id="divselect"> <cite>请选择特效分类</cite> <ul> <li><a href="javascript:;" value="1">导航菜单</a></li> <li><a href="javascript:;" value="2">焦点幻灯片</a></li> <li><a href="javascript:;" value="3">广告代码</a></li> <li><a href="javascript:;" value="4">网页特效</a></li> <li><a href="javascript:;" value="5">jquery 特效</a></li> </ul> <input type="hidden" value="-1" id="selectedvalue"/> </div> <div style="text-align:center;margin:20px 0px 20px 0px;"> <input type="button" value="获取选中项Value" id="btnShowSelectedValue"/> </div> </form> <br/> <hr/> <p style="width:600px; margin:0 auto; line-height:170%;"> 调用方式：$.divselect("#divselect","#selectedvalue");<br/> "#divselect"：自定义下拉列表框div的id<br/> "#selectedvalue"：这个是自定义下拉列表框选中项目后给id为"selectedvalue"的input隐藏域赋值的。懂一点程序的都明白为啥要赋值了，隐藏域的值为选中的下拉列表项的value。 </p> </body> </html>

评论收藏

内容反馈